Console-Logging-Fehler bei bundle.js anstelle von React-Komponente

Question

Ich habe eine Webpack-Build erstellt, die für mich funktioniert - es hat einen dev-Server, den ich für Hot-Reloading verwenden, und einen Produktions-Express-Server, der eine Vorlage html ausführt Datei und integriert die bundle.js Datei.

Das alles ist sehr gut, außer wenn ich in meinem Dev-Server gerade arbeite, gibt die Konsole mir Fehlermeldungen wie folgt aus:

Uncaught Error: Expected the reducer to be a function.(…) bundle.js:36329

Es verweist bundle.js als Quelle des Fehlers nicht Die Komponente, an der ich arbeite, macht es sehr schwierig, die Ursache des Fehlers aufzuspüren.

Ich weiß, soweit die Konsole bewusst ist, ist es die bundle.js Datei, die den Fehler enthält, aber wie kann ich die Konsole den Pre-Bundle-Code protokollieren? (z. B. Component.js)

Vielen Dank im Voraus.

Answer 1

Sie sollten die Quellzuordnung für eine großartige Debugging-Erfahrung aktivieren. Die Quellkarte verknüpft Ihr Bundle mit Ihrem eigenen Code. Wenn also ein Fehler auftritt, gibt die Fehlermeldung die Zeilennummer Ihrer Datei aus, nicht das Bundle. Standardmäßig Quelle Karte sind mit webpack deaktiviert und kann mit der Eigenschaft ‚DevTool‘ wie folgt aktiviert sein:

// webpack.config.js 
module.exports = { 
    ... 
    devtool: '#eval-source-map', 
    ... 
}; 

Hier ist der Link zu der offiziellen Dokumentation: https://webpack.github.io/docs/configuration.html#devtool