Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
nerdcity opened this issue Dec 20, 2018 · 72 comments
Open
Milestone

Comments

@nerdcity
Copy link

nerdcity commented Dec 20, 2018

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

  1. 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.

  1. 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.
  2. 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)".
  3. I stopped execution of the yarn start task with control-C.
  4. I re-ran "yarn start".
  5. 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).
  6. 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
Copy link

stale bot commented Jan 20, 2019

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.

@stale stale bot added the stale label Jan 20, 2019
@vu-mai
Copy link

vu-mai commented Jan 23, 2019

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

@stale stale bot removed the stale label Jan 23, 2019
@ayushnawani
Copy link

facing same issue here.

@russelldavis
Copy link

russelldavis commented Feb 9, 2019

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

@ianschmitz
Copy link
Contributor

@russelldavis a release should be out shortly :)

@Timer
Copy link
Contributor

Timer commented Feb 10, 2019

This is now released. 😄

@Timer Timer closed this as completed Feb 10, 2019
@lock lock bot locked and limited conversation to collaborators Feb 15, 2019
@Timer Timer reopened this Feb 18, 2019
@facebook facebook unlocked this conversation Feb 18, 2019
@Timer Timer added this to the 2.1.x milestone Feb 18, 2019
@Timer
Copy link
Contributor

Timer commented Feb 18, 2019

Reverted due to a bug in webpack.

@darrensw777
Copy link

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.

@Fed03
Copy link

Fed03 commented Mar 5, 2019

👍 same problem

@iansu iansu modified the milestones: 2.1.x, 3.x Mar 10, 2019
@alexander-akait
Copy link

/cc @russelldavis Somebody can create reproducible test repo for #6433 in webpack repo, looks like a bug what we need fix

@ch3nl00ng
Copy link

This issue is killing me

@makahn64
Copy link

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

@russelldavis
Copy link

@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
Copy link

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.

@wzup
Copy link

wzup commented Mar 27, 2019

@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
Copy link

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.

@bugzpodder
Copy link

@bugzpodder Would you know what's so special about 2.1.4 that make it work with chrome while others not? Can't we just apply that change to the CRA? (I scanned through some of the links, still did not seems to find a real solution)

2.1.4 was working possibly because of #5060, you can use react-app-rewired to patch webpack config if you wishes to do so.

also why 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. if its still under org of Facebook, but it does not maintain it....?

Yes, but they are under no obligation to give it up. You'll have to take it up with someone who works there currently.

@Brucuz
Copy link

Brucuz commented Apr 7, 2020

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

@packetstracer
Copy link

packetstracer commented Apr 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

@yutsuo
Copy link

yutsuo commented 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.

@mystaroll
Copy link

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)

@kamilski81
Copy link

kamilski81 commented May 1, 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.

@offreal
Copy link

offreal commented May 1, 2020

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

image
image
image
image

@packetstracer
Copy link

packetstracer commented May 3, 2020

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

  1. I have Javascript source maps enabled

Captura de pantalla 2020-05-03 a las 13 03 04

  1. 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.

@dkgrieshammer
Copy link

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

@reimer-atb
Copy link

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

@naingaungphyo
Copy link

naingaungphyo commented Jul 16, 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 #5846

@xinaesthete
Copy link

Perhaps I did something wrong, but --no-cache doesn't seem to be helping in Chrome. Appears ok in Firefox, but I didn't try that without the flag.

@shernir
Copy link

shernir commented Oct 6, 2020

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

@kostaslamo
Copy link

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?

@tonpascual
Copy link

@bugzpodder solution is a life saver :)

@EliasBobadilla
Copy link

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!

@meatnordrink
Copy link

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

@EliasBobadilla
Copy link

@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

@wildsrincon
Copy link

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

@TomYeoman
Copy link

TomYeoman commented Nov 17, 2020

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

image

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)

image

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

image

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"

@konekoya
Copy link

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

@rpedretti
Copy link

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

@john-twigg-ck
Copy link

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.

@steveler
Copy link

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:

  1. start debugging, works fine
  2. set a breakpoint, works fine
  3. keep playing with the app works fine.
  4. 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

@steveler
Copy link

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.

@john-twigg-ck
Copy link

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.

@scamden
Copy link

scamden commented Aug 6, 2024

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests