-
-
Notifications
You must be signed in to change notification settings - Fork 26.9k
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
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. |
I'm having the same issue. Working with react-scripts 2.0.5 |
facing same issue here. |
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 @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 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. |
👍 same problem |
/cc @russelldavis Somebody can create reproducible test repo for #6433 in webpack repo, looks like a bug what we need fix |
This issue is killing me |
Debugging in Chrome is unusable right now. This is major showstopper. |
@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! |
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
?? Where does webpack config live in the app? |
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. |
2.1.4 was working possibly because of #5060, you can use
Yes, but they are under no obligation to give it up. You'll have to take it up with someone who works there currently. |
Still having this same issue with react script 3.3.0, the breakpoints works just sometimes with no apparent pattern |
Same issue for me with:
seems to work randomly. Adding the no-cache flag to the start script npm command doesn't help, as suggested here: |
Same issue here. Running:
With Firefox 75 it works fine, though. |
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) |
I'm having the same issue using yarn. When I restart the server, then the debug works once until I hot reload the code. |
@real4 that's not the problem we're reporting.
"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. |
Switched to Firefox for this, supposedly it should keep logpoints there, lets see |
Issue still exists as originally reported by @nerdcity vscode 1.46.1 Both with Firefox 77.0.1 and Chromium 83.0.4103.97 |
I'm still having this issue with chrome. |
Perhaps I did something wrong, but |
still have the problem, drive me crazy now i am putting |
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 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 (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 today at morning I got the last stable version of chrome 86.0.4240.183 , launched yesterday. 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 > I tried using the sourceMapPathOverrides rule of > |
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
yarn version: 1.22.4 |
The year is 2023! And this is a problem on a clean If you then Tested on two mutually exclusive computers.
|
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:
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. |
Me too. Someone probably silently updated Chrome. |
This is back for me. Running on (EDIT: it still hangs a bit with |
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
** this is all good, and I am able to repeat steps 8-10 successfully any number of times
NOTE: I did not move the position of the breakpointed line within the file.
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!
The text was updated successfully, but these errors were encountered: