Chrome DevTools not showing correct file name

Question

I'm using ReactJS and while developing and using Google Chrome DevTools I have problem with displayed file names.

Project is created using create-react-app.
I get main.chunk.js name in the console and I want like src/Index.jsx.

How to fix this?

Answer 1

What you're looking for is called a source map, which lets Chrome (and other debugging tools) know how the minified JS bundle corresponds to the original code.

The default create-react-app configuration creates source maps, but there are several settings that may affect what you're seeing. Check each of the following to ensure source maps are generated and that Chrome is detecting them:

1. In the Devtools settings, under Sources, make sure "Enable JavaScript source maps" is checked. When you open the bundle in the Devtools, there should be a message saying "Source map detected." You'll see your original folders highlighted in orange in the left panel.

2. Make sure that the GENERATE_SOURCEMAP environment variable is not set to false in the create-react-app config. You may want to try explicitly enabling this.

3. You can check the Webpack config file create-react-app is using in node_modules/react-scripts/config/webpack.config.js. Do a find for the devtool option and try explicitly changing it to source-map or inline-source-map

4. You may need to set up a custom Webpack configuration and select another source map option, documentation. The inline-source-map and source-map options will be best, but keep in mind that inline-source-map will add several MB to your code bundles.

To isolate the issue, you can make a new default React app and see if the source is showing up in the Devtools. That will tell you if the issue is in Webpack/your app or the Devtools.

Answer 2

From the create-react-app documentation:

You don’t need to install or configure tools like Webpack or Babel. They are preconfigured and hidden so that you can focus on the code.

So you have two way:

1- Create your project from scrath and define your Webpack config file.

2- Change create-react-app Webpack config file(you can find that file using this answers).

Either way for changing chunk names in Webpack you need to define your desired chunk names in Webpack config file (usually webpack.config.js):

module.exports = {
  //...
  output: {
    //...
    chunkFilename: '[id].js'
  }
};

More details here.

You could also split chunk files using SplitChunksPlugin. More details about it here.

Answer 3

That is because react compiles all the files into a bundle and gives it a name. You can however go into the sources tab and see the files there if it were compiled into a static folder like it does in next.js. It is not supported by default to not have hashed names. The documentation does however suggest you could do it but you would have to eject and custom configure webpack.

Answer 4

You can create a new project without create-react-app. In your webpack.config.js file, make sure you enable source mapping (https://webpack.js.org/configuration/devtool/). You should end up with something like this:

{
    mode: "development"
    devtool: "inline-source-map"
    output: {
        index: "./index.js"
    }
    // more configuration
}

Sourcemaps basically map the lines in the source (your react JSX file) to the outputted bundle (0.chunk.js or main.chunk.js in your case).

Answer 5

I had a similar problem and only in Chrome. After checking, I realized that problem is React Developer Tools Chrome extension. The problem was solved when I disabled it.