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

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® Core™ 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

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

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

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.

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.
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)”.
I stopped execution of the yarn start task with control-C.
I re-ran “yarn start”.
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).
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!

About this issue

Original URL
State: open
Created 6 years ago
Reactions: 76
Comments: 71 (5 by maintainers)

Commits related to this issue

Added `npm run start:debug` to fix an issue with react scripts having issues with debugging in chrome. This should be removed once https://github.com/facebook/create-react-app/issues/6074 is fixed. — committed to orionhealth/XBDD by ryan-rushton 5 years ago

Most upvoted comments

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.

+51

stale[bot] on Jan 20, 2019

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

+43

jsdevtom on May 22, 2019

This issue is killing me

+38

ch3nl00ng on Mar 20, 2019

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.

+23

bugzpodder on Mar 27, 2019

@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!

+20

russelldavis on Mar 22, 2019

facing same issue here.

+19

ayushnawani on Feb 1, 2019

@real4 that’s not the problem we’re reporting.

I have Javascript source maps enabled
I have the no-cache option set in start npm task

  "scripts": {
    "start": "react-scripts start --no-cache",
    "build": "react-scripts build",
    "test": "react-scripts test --no-cache",
    "eject": "react-scripts eject"
  },

Neither of those seem to solve the problem reported, it seems to come with hot reloading as @mustafahafidi said. When you just start the server the breakpoint works properly, but once you update your code and it’s hot reloaded it doesn’t work anymore.

Are there plans to solve this after a year? Thinking about starting the project ejecting or using another tool.

+13

packetstracer on May 3, 2020

To fix the problem with sourcemaps in Chrome, you need to enable the ‘Enable JavaScript source maps’ settings

+13

offreal on May 1, 2020

Still facing this issue as well.

+12

felixmpaulus on Dec 10, 2019

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

+12

makahn64 on Mar 21, 2019

@RobertWHurst - turns out that the fix in #7022 isn’t the same issue as this one. This problem is still happening. FWIW, what I’ve seen in the past is that there are three separate (maybe related) problems in this area:

Breakpoints are not adjusted when you add new lines of code above an existing breakpoint and then do a hot update. For example, if you have a breakpoint on line 100 and you insert 2 lines between lines 98 and 99, then the breakpoint may not move to 102 as expected. It might stick on line 100, even through the “new” line 100 is not the same code as the “old” line 100.
If you save a file in VSCode while the VSCode debugger is paused at a breakpoint, then some breakpoints won’t work properly in the hot-updated file after you continue, where “won’t work properly” means that you can’t set breakpoints on valid code lines, you can set breakpoints on whitespace lines in the new file, etc. For this reason, I don’t save changes while the debugger is stopped at a breakpoint.
If you run your app in the VSCode debugger while also having the same app open in Chrome Dev Tools, then you’ll sometimes get “zombie” breakpoints where code execution will stop on a line that doesn’t have a breakpoint on it in VSCode. It’s possible that this is the same problem as (2) above-- it might only happen when you save changes in VSCode while the app is stopped in the VSCode debugger and while the Chrome dev tools are open in the browser.

In all cases, restarting the debug session (stop debugging, stop the npm start process, restart the npm start process, and start debugging again) will fix the problem.

I haven’t done the validation to figure out reliable repro cases for all these, so it’s possible that all three of these are the same root cause.

Hope this info is helpful. It looks like this issue and #8165 both reflect some (maybe all) of the problems that I described above.

Given that there’s a completely new hot-reload solution called Fast Refresh coming to React (it’s already been released for React Native), it’s possible that no fixes will be made for the current hot-reload solution.

Does anyone know if there’s an existing CRA issue that’s tracking adoption of the new Fast Refresh solution in CRA? I wasn’t able to find one.

+10

justingrant on Dec 16, 2019

This is now released. 😄

+10

Timer on Feb 10, 2019

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.

bugzpodder on Mar 22, 2019

I have version 4.0.3 and the problem still persists on edge (chromium version) 88.0.705.74 package.json:

{
  "name": "testgrpc.client.web",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.3",
    "@testing-library/jest-dom": "^5.11.9",
    "bootstrap": "^4.6.0",
    "final-form": "^4.20.1",
    "final-form-arrays": "^3.0.2",
    "google-protobuf": "^3.14.0",
    "grpc-web": "^1.2.1",
    "jquery": "^3.5.1",
    "merge": "1.2.1",
    "mui-rff": "^3.0.3",
    "popper.js": "^1.16.1",
    "react": "16.14.0",
    "react-dom": "16.14.0",
    "react-final-form": "^6.5.2",
    "react-final-form-arrays": "^3.1.3",
    "react-redux": "7.2.2",
    "react-router": "5.2.0",
    "react-router-dom": "5.2.0",
    "react-scripts": "^4.0.3",
    "reactstrap": "8.9.0",
    "redux": "4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-saga": "^1.1.3",
    "svgo": "1.3.0",
    "yup": "^0.32.9"
  },
  "devDependencies": {
    "@testing-library/react": "^11.2.5",
    "@types/jest": "26.0.20",
    "@types/node": "12.11.6",
    "@types/react": "16.14.3",
    "@types/react-dom": "16.9.10",
    "@types/react-redux": "7.1.16",
    "@types/react-router": "5.1.11",
    "@types/react-router-dom": "5.1.7",
    "@types/reactstrap": "8.0.6",
    "@types/redux-devtools-extension": "^2.13.2",
    "@types/redux-saga": "^0.10.5",
    "@types/yup": "^0.29.11",
    "@typescript-eslint/parser": "^4.15.2",
    "cross-env": "6.0.3",
    "eslint-plugin-flowtype": "^3.13.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "4.2.0",
    "jest-environment-jsdom-sixteen": "^1.0.3",
    "nan": "^2.14.1",
    "typescript": "4.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "cross-env CI=true react-scripts test --env=jest-environment-jsdom-sixteen",
    "eject": "react-scripts eject",
    "lint": "eslint ./src/**/*.ts ./src/**/*.tsx"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

yarn version: 1.22.4

rpedretti on Feb 27, 2021

Hi, has anyone had any luck with this?

Breakpoints still are not working in react-scripts 3.3.1. I tried @jsdevtom 's solution but it did’t make any difference, also tried a variety of source map configs in webpack’s devtool property.

It’s getting really frustrating

UPDATE: I also tried downgrading react-scripts to 2.1.4 and breakpoints are still not working as expected…

IliasP91 on Feb 4, 2020

I’ve still encountered this issue even when using solution presented by @jsdevtom . The only sure fire way I can set breakpoints is by using debugger; in code. It’s not as pleasant as just setting the point in devtools, but it makes things predictable at least.

blkwtkns on Jun 12, 2019

still have the problem, drive me crazy now i am putting debugger all over the code

shernir on Oct 6, 2020

Issue still exists as originally reported by @nerdcity

vscode 1.46.1 yarn 1.22.4 react-scripts 3.4.1 react 16.13.1

Both with Firefox 77.0.1 and Chromium 83.0.4103.97

reimer-atb on Jun 23, 2020

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

Steps:

npm install react-app-rewired --save-dev or yarn add react-app-rewired --dev
Create a new file in your root project level called config-overrides.js
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;
}

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.

j3ko on May 30, 2019

👍 same problem

Fed03 on Mar 5, 2019

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

vu-mai on Jan 23, 2019

@eliasbobadilla (and anyone else) - CRA just released v4, which includes Fast Refresh replacing Hot Reload. I’m not seeing the issue anymore now that I’ve upgraded.

https://github.com/facebook/create-react-app/releases/tag/v4.0.0

I’m curious if this has fixed the issue for others as well.

meatnordrink on Nov 3, 2020

Switched to Firefox for this, supposedly it should keep logpoints there, lets see

dkgrieshammer on May 8, 2020

@RobertWHurst - fix is merged so it should be in the next react-scripts release. Keep your eye on npm outdated.

justingrant on Oct 21, 2019

@russelldavis a release should be out shortly 😃

ianschmitz on Feb 10, 2019

I’m curious if this has fixed the issue for others as well.

After upgrading to CRA v4. I can confirm this bug is no longer exist

konekoya on Nov 18, 2020

I’m still having this issue with chrome. But works with “node scripts/start.js --no-cache” --no-cache flag. This issue is also related with locked https://github.com/facebook/create-react-app/issues/5846

naingaungphyo on Jul 16, 2020

I can confirm that this is still an issue occasionally. I just ran into it again, even using the start:debug solution of @jsdevtom . I have no clue what to do to work around it, except using debugger statements.

hmeerlo on Oct 4, 2019

So to clarify, is this still an issue? As someone looking to use the react-error-overlay plugin in a non-CRA app[1] (which already has full control of the sourcemap devtool) , this comment from @russelldavis seems concerning: https://github.com/facebook/create-react-app/issues/6433#issuecomment-464414558

It seems like there’s no current way to have fully working sourcemaps as well as react-error-overlay working in an app?

All of the comments in this thread mainly discuss switching the sourcemap type in webpack, but don’t seem to take into account that this will seemingly reintroduce #6433. Curious what the current state is and whether there’s an open webpack issue somewhere if it’s indeed a webpack bug.

[1] (or perhaps investigate using it as part of a React fast-refresh implementation: https://github.com/facebook/react/issues/16604#issuecomment-528663101)

jdb8 on Sep 6, 2019

Try this package https://www.npmjs.com/package/react-breakpoint-fix

just install the package and run react-breakpoint-fix from the terminal.

This fixed it for me. I’m using react-scripts@3.x

If you can use cheap-eval sure. I’m not sure adding a dependency to regex the eval tool to the cheap one is so wise. I definitely know this would not fly within my team.

blkwtkns on Jul 5, 2019

Also facing the same problem. I have to stop the development server and start it again. Thats a huge pain and time consumption. Is there any hack fix for this?

kostaslamo on Oct 15, 2020

Same issue for me with:

react script 3.4.1 (freshly new created app)
chrome 81.0.4044.92
os x 10.14.6

seems to work randomly.

Adding the no-cache flag to the start script npm command doesn’t help, as suggested here: CRA chrome issue solution

packetstracer on Apr 15, 2020

Also confirming that this is still an issue even with @jsdevtom’s fix. I’m having to restart my app to get debugging work again after a hot reload.

jcapogna on Oct 5, 2019

I still have this problem, is there any solution for this issue?

filip-djordjevic on Jul 4, 2019

The year is 2023! And this is a problem on a clean create-react-app If you launch the Chrome bugger with a breakpoint enabled it will hang loading the site. Now the running react-script start is corrupted.

If you then a) remove all breakpoints b) react script start c) Launch Chrome debugger again it will display, and then you can start adding breakpoints.

Tested on two mutually exclusive computers.

react-scripts : 5.0.1 Literally no changes to create-react-app except to add a <button/> to test clicking.

john-twigg-ck on Mar 13, 2023

One solution I found to solve this warning was to downgrade the react-script package to version 3.4.4 and this solved the warnings

wildsrincon on Nov 8, 2020

@meatnordrink today at morning I got the last stable version of chrome 86.0.4240.183 , launched yesterday. https://chromereleases.googleblog.com/2020/11/stable-channel-update-for-desktop.html and the problem with breakpoints is gone.

Anyway I’m developing a new app some weeks ago. I think is a good oportunity to change to create-react-app 4.0.0 version now

EliasBobadilla on Nov 3, 2020

@bugzpodder solution is a life saver 😃

tonpascual on Oct 18, 2020

I’m having the same issue using yarn. When I restart the server, then the debug works once until I hot reload the code.

kamilski81 on May 1, 2020

Not sure if it’s related, but I am facing the issue without using react-scripts. I am only using react-hot-loader (4.12.18)

mystaroll on Apr 16, 2020

Same issue here. Running:

react-scripts: 3.2.0
Microsoft Edge (Chromium) 81.0.416.53
Windows 10 Pro Build 18363

With Firefox 75 it works fine, though.

yutsuo on Apr 16, 2020

Still having this same issue with react script 3.3.0, the breakpoints works just sometimes with no apparent pattern

Brucuz on Apr 7, 2020

Try this package https://www.npmjs.com/package/react-breakpoint-fix

just install the package and run react-breakpoint-fix from the terminal.

This fixed it for me. I’m using react-scripts@3.x

sumeetsgh93 on Jul 5, 2019

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

bugzpodder on May 30, 2019

@hmeerlo read @jsdevtom 's solution. it works

adamchenwei on May 27, 2019