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 · 35 comments

Comments

@nerdcity
Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

commented Feb 1, 2019

facing same issue here.

@russelldavis

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Collaborator

commented Feb 10, 2019

@russelldavis a release should be out shortly :)

@Timer

This comment has been minimized.

Copy link
Collaborator

commented Feb 10, 2019

This is now released. 😄

@Timer Timer closed this 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

This comment has been minimized.

Copy link
Collaborator

commented Feb 18, 2019

Reverted due to a bug in webpack.

@darrensw777

This comment has been minimized.

Copy link

commented Feb 19, 2019

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

This comment has been minimized.

Copy link

commented Mar 5, 2019

👍 same problem

@iansu iansu modified the milestones: 2.1.x, 3.x Mar 10, 2019

@evilebottnawi

This comment has been minimized.

Copy link

commented Mar 12, 2019

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

@ch3nl00ng

This comment has been minimized.

Copy link

commented Mar 20, 2019

This issue is killing me

@makahn64

This comment has been minimized.

Copy link

commented Mar 21, 2019

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

@russelldavis

This comment has been minimized.

Copy link

commented Mar 22, 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!

@bugzpodder

This comment has been minimized.

Copy link
Collaborator

commented Mar 22, 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 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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Collaborator

commented Mar 27, 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.

@perich

This comment has been minimized.

Copy link

commented Apr 1, 2019

I've used this tool to override cheap-module-source-map with eval-source-map

https://github.com/arackaf/customize-cra

looking forward to a permanent fix though, since this is indeed a heavy handed work around. Also, when using eval-source-map and doing CMD + P in the debugger to find files, it will search through the minified files as well as the source mapped ones, which is definitely not ideal :\

@jsdevtom

This comment has been minimized.

Copy link

commented May 22, 2019

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

@konekoya

This comment has been minimized.

Copy link

commented May 23, 2019

Does anyone have the same issue after upgrading to CRA 3.x? This still seems to be an issue in CRA 3.x?

@adamchenwei

This comment has been minimized.

Copy link

commented May 25, 2019

@jsdevtom worked! but why??

@hmeerlo

This comment has been minimized.

Copy link

commented May 27, 2019

Doesn't work with 3.0 for me as well, very annoying and I have no clue how to fix it

@adamchenwei

This comment has been minimized.

Copy link

commented May 27, 2019

@hmeerlo read @jsdevtom 's solution. it works

@hmeerlo

This comment has been minimized.

Copy link

commented May 28, 2019

@adamchenwei Ah sorry, I focused on @bugzpodder solution but that was a workaround that stops working every now and then. This one does work indeed, thanks.

@miggu

This comment has been minimized.

Copy link

commented May 28, 2019

Thank you @jsdevtom . It has been so stressful to develop like this until now in Chrome

@jsdevtom

This comment has been minimized.

Copy link

commented May 29, 2019

@adamchenwei I don't know, I haven't delved in to the react scripts enough to find out.
@miggu You're very welcome

Please be aware that I consider this a temporary solution. The breakpoints still fail for me after an error is thrown in the app. On average I would say I can debug develop for about 30 minutes before I need to run the command again and thus hit the breakpoints.

@itsmhuang

This comment has been minimized.

Copy link

commented May 29, 2019

I did the v2 revert solution as described by @bugzpodder. Works so far. Hopefully issue will be fixed soon tho.

@wzup

This comment has been minimized.

Copy link

commented May 30, 2019

@jsdevtom

Using this to the package.json worked for me: "start:debug":

How do you start the app then?

$ npm start ?
$ npm run start:debug ?
@j3ko

This comment has been minimized.

Copy link

commented May 30, 2019

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

Steps:

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

@bugzpodder

This comment has been minimized.

Copy link
Collaborator

commented May 30, 2019

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

@jsdevtom

This comment has been minimized.

Copy link

commented Jun 8, 2019

@jsdevtom

Using this to the package.json worked for me: "start:debug":

How do you start the app then?

$ npm start ?
$ npm run start:debug ?

You use npm run start:debug. Here is the respective documentation: https://docs.npmjs.com/cli/run-script.html

@blkwtkns

This comment has been minimized.

Copy link

commented Jun 12, 2019

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.

@filip-djordjevic

This comment has been minimized.

Copy link

commented Jul 4, 2019

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

JuanNitaelDuque added a commit to JuanNitaelDuque/pokeapi-browser that referenced this issue Jul 4, 2019

@risrawat90

This comment has been minimized.

Copy link

commented Jul 5, 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

@blkwtkns

This comment has been minimized.

Copy link

commented Jul 5, 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.

@ValeryVS

This comment has been minimized.

Copy link

commented Aug 9, 2019

I think it can be fixed if we will be able to choose sourcemap type via environment variable.
#7495

rushton3179 added a commit to orionhealth/XBDD that referenced this issue Aug 15, 2019

Added `npm run start:debug` to fix an issue with react scripts having…
… issues with debugging in chrome. This should be removed once facebook/create-react-app#6074 is fixed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.