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(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

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!

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.

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

facing same issue here.

@jasonLaster

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 #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.)

@russelldavis

@russelldavis a release should be out shortly :)

This is now released. 😄

Reverted due to a bug in webpack.

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.

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?

@bugzpodder

@bugzpodder solution is a life saver :)

I have the same problem in version 86.0.4240.111 (Official Build) (64 bits) in Ubuntu 20.04, the breakpoints stop working when the page is reloaded. I disabled hardware acceleration, I changed my scripts in my package.json with "--no-cache" but I couldn't fix it.

I Need help!

@EliasBobadilla

@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

@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

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

I still have the same issue, I'm unable to set breakpoints

With, or without the "sourceMapPathOverrides" I've seen mentioned in a few places (E.G https://stackoverflow.com/questions/61953992/breakpoints-not-working-debugging-react-app-in-chrome-through-visual-studio-code/62207696#62207696)

It seems I CAN trigger a debugger within the editor, via using the "debugger" statement, rather than clicking on an actual breakpoint. The file the break appears in, however isn't my source

Debugger statement triggers in > /home/wsl-tom/git/project
Actual file where debugger was written > //wsl$/Ubuntu-18.0/home/wsl-tom/git/project

I tried using the sourceMapPathOverrides rule of > "/home/wsl-tom/*": "//wsl$/Ubuntu-18.0/home/wsl-tom/*",, however it still triggers in wrong file. And I also still have "unbound breakpoint"

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

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

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

I'm seeing this same problem, although my setup is more complex and I haven't been able to isolate it down yet. Everything was working fine and then ? something changed ? and now breakpoints cause the browser to hang on refresh:

start debugging, works fine
set a breakpoint, works fine
keep playing with the app works fine.
press the reload button in chrome, and it hangs.

I know this isn't a particularly useful bug report; I mostly want to give a +1 to @john-twigg-ck

Just popping in to say that as quickly and mysteriously as this bug appeared, it has now disappeared again. I don't recall making any updates to my dev environment along the way... maybe it was a chrome bug that got auto-updated away.

Just popping in to say that as quickly and mysteriously as this bug appeared, it has now disappeared again. I don't recall making any updates to my dev environment along the way... maybe it was a chrome bug that got auto-updated away.

Me too. Someone probably silently updated Chrome.

This is back for me. Running on react-scripts@5.0.1. Running in incognito with no extensions. Stopping on a breakpoint works one or two times but then freezes for a very long time around the 2nd or 3rd time while ostensibly chrome is doing something with the source map. Swapping to eval-source-map seems to solve it

(EDIT: it still hangs a bit with eval-source-map but the time it does so is much shorter)

https://www.instagram.com/manuelsvasques/linkshttps://github.com/GoogleChrome/chrome-extensions-samples

Navigation Menu

Repository navigation

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

Is this a bug report?

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to Reproduce

54 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Is this a bug report?

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to Reproduce

Activity

stale commented on Jan 20, 2019

vu-mai commented on Jan 23, 2019

ayushnawani commented on Feb 1, 2019

russelldavis commented on Feb 9, 2019

ianschmitz commented on Feb 10, 2019

Timer commented on Feb 10, 2019

Timer commented on Feb 18, 2019

darrensw777 commented on Feb 19, 2019

54 remaining items

kostaslamo commented on Oct 15, 2020

tonpascual commented on Oct 18, 2020

EliasBobadilla commented on Oct 31, 2020

meatnordrink commented on Nov 3, 2020

EliasBobadilla commented on Nov 3, 2020

wildsrincon commented on Nov 8, 2020

TomYeoman commented on Nov 17, 2020

konekoya commented on Nov 18, 2020

rpedretti commented on Feb 27, 2021

john-twigg-ck commented on Mar 13, 2023

steveler commented on Mar 15, 2023

steveler commented on Mar 24, 2023

john-twigg-ck commented on Mar 27, 2023

scamden commented on Aug 6, 2024

CACHIBOMBO2025 commented on Sep 7, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions