Create-react-app: No webpack js source maps in dev mode in version 1.0.7

[tomjal]

I updated to version 1.0.7 and I no longer can debug code in browser. Chrome dev tools only see css files + some files from node_modules, cant see any actual code. What am i doing wrong?

[gaearon]

Please provide a project reproducing the problem.

[tomjal]

@gaearon I cant, its not open source. Well i found the code in browser. Previously (pre 1.0.0) code was under "webpack://" in Chrome Dev Tools, it was structured exactly as folders on disk. Now in 1.0.7 files are there but in "localhost:3000/static/js" and they are mixed in big list with loads of unrelevant files from node_modules different libraries (e.g. babel-runtime, core-js, fbjs.....). Maybe its intended to work that way in webpack 2?

[Timer]

I believe this is related to us turning our sourcemaps into absolute paths.
However, everything is neatly displayed for me:

[tomjal]

@Timer hmm im using Windows and NPM 5.0.1. I just created empty "starter" project using Create-react-app 1.0.7 and this is how it looks for me: http://imgur.com/a/lPE1S and http://imgur.com/a/3wmPB while using version 0.9.5: http://imgur.com/a/rLHsH

[Timer]

Hmm; that looks like a chrome bug to me ... maybe they don't check for windows path splits?

[gaearon]

maybe they don't check for windows path splits?

This is quite possible. Maybe we can just replace them on our side.

[danderson00]

I also just noticed source maps maps are broken for newly created apps too. Interestingly, an existing project that I created a few weeks ago is still working. I've since ejected, but it's using webpack 1.14.0.

It seems version 1.x of react-scripts is now broken in some way. The only way I can find to work around this is to run npm i --save-dev [email protected] after running create-react-app, which rolls back to webpack 1.14.0.

To reproduce, at least for me, is just to create-react-app test, cd test, npm start, view in Chrome 58.0.3029.110 (64-bit) and only css files appear under the webpack:// folder in dev tools. I have the React Developer Tools extension version 2.3.1 installed. I also just updated Chrome to 59.0.3071.86 (Official Build) (64-bit) and the issue is still present.

[gaearon]

@danderson00 You did not specify if you are using Windows or not, so it's hard to say anything 😞

I wish people who are upvoting this issue would share more details, as we just don't have enough information about what everybody is seeing. More screenshots would be helpful.

[gaearon]

For example, it's not clear if source maps don't work or if you just don't find them in webpack:// folder. These sound like different things to me. Can you navigate to a file by pressing Ctrl+O? Do breakpoints work? It's not clear from the reports here.

[plusCubed]

Sourcemaps work - when manually searching for a file (Ctrl+O) and setting breakpoints, the correct javascript source is used. It's just that they are not under the webpack:// folder and they list out the full directory addresses without organizing into directories.

[gaearon]

Makes sense, thanks! Would you like to contribute a fix? I think devtoolModuleFilenameTemplate in Webpack config needs to always be formatted as Unix path.

[gaearon]

Fixed in 1.0.8. Please verify.
https://github.com/facebookincubator/create-react-app/releases/tag/v1.0.8

[istana]

I can confirm the fix - I upgraded yarn.lock in my existing create-react-app and source maps works now

[mnemanja]

I'm on 1.0.11 - windows 10.
I've had the same problem and removal of the package-lock.json (npm 5) and reinstalling the node_modules fixed it for me.

[ltfschoen]

I encountered a confusing issue where my source maps didn't load correctly after I renamed say a file a.js to aOld.js, and then created a new file called a.js. It then only showed the old aOld.js in the source maps but not the new a.js file that now existed, and when I ran my code it still called the code in the aOld.js file even though other files were still calling a.js.