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

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.