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 bundle.js file.

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 bundle.js as the source of the error, not the ponent 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 bundle.js file that contains the error, but how can I get the console to log the pre-bundle code? (e.g. Component.js)

Thanks in advance.

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 bundle.js file.

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 bundle.js as the source of the error, not the ponent 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 bundle.js file that contains the error, but how can I get the console to log the pre-bundle code? (e.g. Component.js)

Thanks in advance.

• javascript
• reactjs
• console
• webpack
• webpack-dev-server

• It can't point you directly to the ponent since you're using the bundle. Better to do is add a break point to the line that causes the error and check from there – Semi-Friends Commented Nov 12, 2016 at 3:57

6 Answers 6

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: https://webpack.github.io/docs/configuration.html#devtool

An easier approach to this is:

Goto Dev tools -> dev tools settings -> select "Preferences" tab -> select check box - "Enable JavaScript source maps"

Hope this helps.

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

Adding this logs the error in the console with the actual ponent name and line number in the source. But this allows the users to view the code?

If you are using latest webpack i.e v4 you need to write this

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

Updated Documentation: https://webpack.js/guides/development/#using-source-maps

For webpack 6.0.1. I apply the following for logging in browser console:

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

To eliminate much logging and reduce bundle size in production mode you can use 'cheap-module-source-map':

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

For people using craco,

You can achieve this by:

module.exports = {
    webpack: {
        configure: {
            // must be updated later for production optimization
            devtool: 'eval-source-map',
        },
    }
}