Chrome debugger breakpoints fail with react-scripts 2.x after hot-update

[nerdcity]

trafficstars

Is this a bug report?

yes

Did you try recovering your dependencies?

test-cra $npm --version 5.6.0

test-cra $yarn --version 1.12.3

Which terms did you search for in User Guide?

I looked for "hot-update" and "breakpoint"

Environment

System: OS: macOS High Sierra 10.13.6 CPU: x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz Binaries: Node: 8.11.1 - ~/.nvm/versions/node/v8.11.1/bin/node Yarn: 1.12.3 - /usr/local/bin/yarn npm: 5.6.0 - ~/.nvm/versions/node/v8.11.1/bin/npm Browsers: Chrome: 71.0.3578.98 Firefox: 63.0.1 Safari: 11.1.2 npmPackages: react: ^16.7.0 => 16.7.0 react-dom: ^16.7.0 => 16.7.0 react-scripts: 2.1.1 => 2.1.1 npmGlobalPackages: create-react-app: Not Found

Steps to Reproduce

1. ran "yarn create react-app test-cra"
2. ran "yarn install"
3. ran "yarn start"
4. Chrome opened a window for http://localhost:3000, with the app in it
5. I opened Chrome dev tools and went to the source tab
6. I hit cmd-P and opened App.js
7. I set a breakpoint at line 7, the first line of the render() method
8. I clicked on the "reload this page" arrow in the "React App" browser window
9. the debugger in dev tools window stopped at the breakpoint
10. I hit F8 to unpause

** this is all good, and I am able to repeat steps 8-10 successfully any number of times

11. in IntelliJ I edited the App.js file so it was like this:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt={this.foo} />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }

  foo = 'bar';
}

export default App;

NOTE: I did not move the position of the breakpointed line within the file.

12. I saw that the app recompiled and reloaded successfully. The code as pasted above is what appeared in the devtools source tab, and the breakpoint was positioned at the same place. However, the debugger did not stop at the breakpoint.
13. I clicked on the "reload this page" arrow in the "React App" browser window, but the debugger does not stop there anymore. I see that at the bottom of the Source tab, it now says "(source mapped from main.{guid}.hot-update.js)".
14. I stopped execution of the yarn start task with control-C.
15. I re-ran "yarn start".
16. the debugger does not stop on the initial page load, but it does stop on every subsequent page load (when I click the "reload this page" arrow).
17. I see that on the bottom of the devtools Source tab, it now says "(source mapped from main.chunk.js)".

My apologies if the format of how I described this is not matching the following bullet points - I think I have done what they ask, but in a more interleaved fashion. I think the essence is that I have described a reproducible demo with what I expected, what I did, and what happened as a result.

NOTES: this does NOT happen to me when I am using react-scripts 1.1.4 (in the full-blown app where I encountered the issue) but only appeared when I upgraded to 2.x (first 2.0.5 and now 2.1.1).

Thanks very much for your help with this!

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[vu-mai]

I'm having the same issue. Working with react-scripts 2.0.5

[ayushnawani]

facing same issue here.

[russelldavis]

I'm hitting this issue as well. Only happens in Chrome, not Firefox. Chrome has a long history of issues with sourcemaps, and I found that changing webpack's source map type from cheap-module-source-map to eval-source-map fixes the issue. Fortunately, that change has already been made at https://github.com/facebook/create-react-app/pull/5060, it just hasn't made it into a release yet.

@jasonLaster @Timer (sorry if you're the wrong people to ping), any chance we can get a patch release with that fix? (This feels like a pretty major issue.)

[ianschmitz]

@russelldavis a release should be out shortly :)

[Timer]

This is now released. 😄

[Timer]

Reverted due to a bug in webpack.

[darrensw777]

Is there a timeline for this release or are you waiting for webpack to fix their issues? I have the same problem, if you close dev tools then reopen them it works again, but only once.

[fteotini]

👍 same problem

[alexander-akait]

/cc @russelldavis Somebody can create reproducible test repo for https://github.com/facebook/create-react-app/issues/6433 in webpack repo, looks like a bug what we need fix

[ch3nl00ng]

This issue is killing me

[makahn64]

Debugging in Chrome is unusable right now. This is major showstopper.

[russelldavis]

@Timer @ianschmitz can you help the community understand the prioritization of this issue? Breakpoints being unusable in CRA apps seems like it should be a top priority, but empirically it doesn't seem to be.

Does Facebook not use CRA internally? Does Facebook not use breakpoints internally? Are breakpoints just not considered a critical feature? Something else entirely?

Thanks!

[bugzpodder]

Switching source-maps from cheap-module-source-map to eval-source-map breaks the error overlay functionality. We can't really have one fix breaking other things, so that change was reverted for now. You can pin react-scripts to 2.1.4 if you need to have Chrome debugging functionality. I have an issue open at Webpack to look at this https://github.com/webpack/webpack/issues/8910, feel free to subscribe to it for any updates.

This project is maintained by a team of volunteers that don't work at Facebook (AFAIK). I can tell you that Facebook also doesn't use CRA internally.

[wzup]

@bugzpodder

Switching source-maps from cheap-module-source-map to eval-source-map breaks the error overlay functionality. We can't really have one fix breaking other things, so that change was reverted for now. You can pin react-scripts to 2.1.4 if you need to have Chrome debugging functionality. I have an issue open at Webpack to look at this webpack/webpack#8910, feel free to subscribe to it for any updates.

This project is maintained by a team of volunteers that don't work at Facebook (AFAIK). I can tell you that Facebook also doesn't use CRA internally.

How to

Switching source-maps from cheap-module-source-map to eval-source-map

??

Where does webpack config live in the app?

[bugzpodder]

Goto node_modules/react-scripts/config/webpack.config.js, look up cheap-module-source-map and change to eval-source-map. This is temporary and you'll have to do this every time you change your package configuration.

[perich]

I've used this tool to override cheap-module-source-map with eval-source-map

https://github.com/arackaf/customize-cra

looking forward to a permanent fix though, since this is indeed a heavy handed work around. Also, when using eval-source-map and doing CMD + P in the debugger to find files, it will search through the minified files as well as the source mapped ones, which is definitely not ideal :\

[jsdevtom]

Using this to the package.json worked for me: "start:debug": "react-scripts --inspect start --no-cache --runInBand",

[konekoya]

Does anyone have the same issue after upgrading to CRA 3.x? This still seems to be an issue in CRA 3.x?

[adamchenwei]

@jsdevtom worked! but why??

[hmeerlo]

Doesn't work with 3.0 for me as well, very annoying and I have no clue how to fix it

[adamchenwei]

@hmeerlo read @jsdevtom 's solution. it works

[hmeerlo]

@adamchenwei Ah sorry, I focused on @bugzpodder solution but that was a workaround that stops working every now and then. This one does work indeed, thanks.

[miggu]

Thank you @jsdevtom . It has been so stressful to develop like this until now in Chrome

[jsdevtom]

@adamchenwei I don't know, I haven't delved in to the react scripts enough to find out. @miggu You're very welcome

Please be aware that I consider this a temporary solution. The breakpoints still fail for me after an error is thrown in the app. On average I would say I can debug develop for about 30 minutes before I need to run the command again and thus hit the breakpoints.

[itsmhuang]

I did the v2 revert solution as described by @bugzpodder. Works so far. Hopefully issue will be fixed soon tho.

[wzup]

@jsdevtom

Using this to the package.json worked for me: "start:debug":

How do you start the app then?

$ npm start ?
$ npm run start:debug ?

[j3ko]

I ended up working around this by using react-app-rewired. I am running react-scripts 3.0.1.

Steps:

1. npm install react-app-rewired --save-dev or yarn add react-app-rewired --dev
2. Create a new file in your root project level called config-overrides.js
3. Paste the following code in config-overrides.js:

module.exports = function override(config, env) {
  if (env !== 'production') {
    config = { ...config, ...{ devtool: 'cheap-module-eval-source-map' } };
  }
  return config;
}

4. In your packages.json replace your run scripts with the following:

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

I'm just wondering why everyone is trying to replace the devtool with eval-source-map, there are many devtools available and cheap-module-eval-source-map seems to work fine for me, unless I'm missing something.

[bugzpodder]

@j3ko The error overlay displays wrong lines if cheap-module-eval-source-map is used.

[jsdevtom]

@jsdevtom

Using this to the package.json worked for me: "start:debug":

How do you start the app then?

$ npm start ?
$ npm run start:debug ?

You use npm run start:debug. Here is the respective documentation: https://docs.npmjs.com/cli/run-script.html