Console logging error on bundle.js instead of React component

Question

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 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 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.

It can't point you directly to the component 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
– Semi-Friends, Commented Nov 12, 2016 at 3:57

Seb Bizeul · Accepted Answer · 2016-11-12 07:34:23Z

16

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

edited Nov 12, 2016 at 7:34

answered Nov 12, 2016 at 7:26

Seb Bizeul

1,0061 gold badge12 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1207289 Over a year ago

It would not let me correct my vote without editing the question

Stuart Daniells · Accepted Answer · 2023-01-09 06:11:49Z

4

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.

edited Jan 9, 2023 at 6:11

answered Jan 9, 2023 at 6:09

Stuart Daniells

414 bronze badges

1 Comment

Fakeer Over a year ago

Maybe better to add where this Dev Tools is located

Haritha K R · Accepted Answer · 2020-04-15 13:36:45Z

2

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

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

answered Apr 15, 2020 at 13:36

Haritha K R

211 bronze badge

Comments

Chandan Singh · Accepted Answer · 2018-09-18 10:50:48Z

1

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.org/guides/development/#using-source-maps

answered Sep 18, 2018 at 10:50

Chandan Singh

411 silver badge7 bronze badges

2 Comments

user1063287 Over a year ago

setting mode: "development" and devtool: 'inline-source-map' OR devtool: 'source-map' doesn't work for me - errors still reference extremely long lines in bundle.js which are highly minimised and obfuscated and i can't make sense of (using webpack 5.61.0).

user1063287 Over a year ago

update: for reference, in case it helps anyone else, i was using UglifyJS Webpack Plugin - when i enabled sourceMap: true in that plugins configuration, i could see the source maps in chrome dev tools. solution was inspired by this answer: stackoverflow.com/a/41889062

Roman · Accepted Answer · 2018-10-15 02:32:05Z

1

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',
  ...
}

answered Oct 15, 2018 at 2:32

Roman

22.3k18 gold badges103 silver badges105 bronze badges

Comments

coolbeatz71 · Accepted Answer · 2022-06-21 15:58:51Z

1

For people using craco,

You can achieve this by:

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

answered Jun 21, 2022 at 15:58

coolbeatz71

1,1062 gold badges11 silver badges23 bronze badges

Collectives™ on Stack Overflow

Console logging error on bundle.js instead of React component

6 Answers 6

1 Comment

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related