Console logging error on bundle.js instead of React component

could not load content for webpack http status code 404
webpack bundle not executing
module not found empty dependency (no request)
webpack stack trace
react source map
webpack-dev-server sourcemap
what is webpack
webpack 4 devtools

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.

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

Console logging error on bundle.js instead of React component, You should enable source mapping for a great debugging experience. Source map will link your bundle with your own code so when an error  Logging is an essential part of development. While working on React projects, logging provides a way to get feedback and information about what’s happening within the running code. However, once an app or website is deployed into production, the default console provides no way to continue benefiting from logs.

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

Step up your console logging game in your React app, So you decided to start work on your ambitious React app using You begin filling your code with console.log() messages, and soon debug is an extremely popular tool in the Node.js world. It will let us create messages of different levels such as info or error Log.info(loginInfo, `App Component`);. So you’re working on a React app and you finally decide it’s time to venture off of the golden path and actually incorporate some error…

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

How I solved and debugged my Webpack issue through trial, error , import React from 'react';import PropTypes from 'prop-types'; I want it to point to a file Hello.js and not to a bundled file, kinda like this guy did here. upon this issue where they recommend to use webpack-serve instead of webpack-dev-​server. Component { console.log(hello.world); render() { return  However, React components are declarative and specify what should be rendered: < Button />

console.log commands are not shown their code line locations , After 0.61.x releases on the debug mode console.log commands are not projectName\node_modules\react-native\Libraries\Core\setUpDeveloperTools.js:​73 directo. React component authors have often requested a way to log this information to warnings ( console.warn ) and errors ( console.error ). To filter your console output. You can independently configure both action logger and real console output in a wide range. To associate console messages with a specific components/stories. You can see which story emits which message. To output some data into Action Logger from your deep components without importing addon-actions for that. try

Code-Splitting – React, Bundle: function add(a, b) { return a + b; } console.log(add(16, 26)); // 42 If you'​re using Create React App, Next.js, Gatsby, or a similar tool, you will have a The React.lazy function lets you render a dynamic import as a regular component​. module fails to load (for example, due to network failure), it will trigger an error​. As React 16 release is getting closer, we would like to announce a few changes to how React handles JavaScript errors inside components. These changes are included in React 16 beta versions, and will be a part of React 16. By the way, we just released the first beta of React 16 for you to try! Behavior in React 15 and Earlier In the past, JavaScript errors inside components used to corrupt

30 Answers from Stack Overflow to the most popular webpack , NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack. ❓ Question got 1,428+ points, answer got 746+ points Output. Sizes with Angular 6.0.0 with CLI 6.0.0. dist/main.[hash].bundle.js Your application System.import('app').​catch(function(err){ console.error(err); }); </script> import React, {Component} from 'react'; The only method you must define in a React.Component subclass is called render(). All the other methods described on this page are optional. We strongly recommend against creating your own base component classes. In React components, code reuse is primarily achieved through composition rather than inheritance. Note:

Comments
  • 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