Error registering console on bundle.js instead of React component

Question

I created a Webpack assembly that works great for me - it has a dev server that I use for a hot reboot and a production express server that runs the html file template and integrates bundle.js file.

This is great, unless I work on my dev server, the console gives me error messages like this:

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

It refers to bundle.js as the source of the error, not the component that I am working on, which makes it difficult to track the source of the error.

I know how much the console knows that this is the bundle.js file that contains the error, but how can I get the console to register the pre-build code? (e.g. Component.js )

Thanks in advance.

Answer 1

You should enable source mapping for excellent debugging work. The source card will associate your bundle with your own code, so if an error occurs, the error message will display the line number of your file, not the bundle. By default, the source map is disabled using webpack and can be enabled using the devtool property as follows:

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

Here's a link to the official documentation: https://webpack.imtqy.com/docs/configuration.html#devtool