Paulos3000 Paulos3000 - 1 year ago 160
React JSX Question

Console logging error on bundle.js instead of React component

I have created a Webpack build which works fine for me - it has a dev-server which I use for hot-reloading, and a production express server that runs a template html file and integrates the


This is all great, except when I'm working in my dev-server, the console gives me error messages like this:

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

It references
as the source of the error, not the component I am working in, which makes it very difficult to track down the source of the error.

I know as far as the console is aware it is the
file that contains the error, but how can I get the console to log the pre-bundle code? (e.g.

Thanks in advance.

Answer Source

You should enable source mapping for a great debugging experience. Source map will link your bundle with your own code so when an error occurs, the error message will output the line number of your file, not the bundle. By default source map are disabled with webpack and can be enable with the property 'devtool' like this:

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

Here's the link to the official documentation:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download