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

Created by: nerdcity

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!