Create-react-app: Updating app.js causes webpack dev server to report error and then reload the page

[kellyrmilligan]

If you are reporting a bug, please fill in below. Otherwise feel free to remove this template entirely.

Can you reproduce the problem with latest npm?

yes

Many errors, especially related to "missing modules", are due to npm bugs.

If you're using Windows, follow these instructions to update npm.

If you're using OS X or Linux, run this to update npm:

npm install -g npm@latest

cd your_project_directory
rm -rf node_modules
npm install

Then try to reproduce the issue again.

Can you still reproduce it?
yes

Description

from a clone of master branch, running npm start launches webpack dev server as expected. making a simple text change to app.js in the template folder causes an error to occur in webpack dev server.

"Aborted because 191 is not accepted
Update propagation: 191 -> 130 -> 302"

stack:

"Error: Aborted because 191 is not accepted
Update propagation: 191 -> 130 -> 302
    at hotApply (http://localhost:3000/static/js/bundle.js:432:30)
    at hotUpdateDownloaded (http://localhost:3000/static/js/bundle.js:285:13)
    at hotAddUpdateChunk (http://localhost:3000/static/js/bundle.js:265:13)
    at webpackHotUpdateCallback (http://localhost:3000/static/js/bundle.js:8:12)
    at http://localhost:3000/0.e5484019108a9e1efba9.hot-update.js:1:1"

Expected behavior

no error should occur in this case.

Actual behavior

see above.

Environment

Run these commands in the project folder and fill in their results:

1. npm ls react-scripts (if you haven’t ejected): 0.9.4
2. node -v: 6.9.2
3. npm -v: 3.10.9

Then, specify:

1. Operating system: os x 10.12.3
2. Browser and version: chrome 56.0.2924.87

Reproducible Demo

Please take the time to create a new app that reproduces the issue.

Alternatively, you could copy your app that experiences the problem and start removing things until you’re left with the minimal reproducible demo.

(Accidentally, you might get to the root of your problem during that process.)

Push to GitHub and paste the link here.

By doing this, you're helping the Create React App contributors a big time!
Demonstrable issues gets fixed faster.

this is in the current master branch.

[kellyrmilligan]

this is only if in chrome I have pause on exceptions turned on. otherwise it reloads the page.

[gaearon]

This is probably by design in Webpack, but maybe we could ask them to not use exceptions there.
You can work around it by right clicking on the line and choosing "never pause here".

[kellyrmilligan]

Sounds good to me. I'm not sure though if that would sometimes hide actual errors.

[gaearon]

Let’s keep it open. It is annoying and we should follow up with Webpack on this.
Maybe there’s an easy fix.

[gaearon]

The followup work here is to talk to somebody from Webpack (e.g. by raising an issue) and discuss if there’s a way to avoid this pausing on every refresh when "pause on errors" is used.

[TheLarkInn]

Tagging myself @sokra and @spacek33z for followup

[gaearon]

Maybe just forking a Promise by attaching an empty catch handler (but returning an original Promise) would be enough. So that Chrome doesn’t think it’s unhandled. Not sure if that would work though..

[ugavnholt]

Workaround is to open the developer tools in chrome, and the exception is no longer thrown - it doesn't have to stay open - still annoying though

[mk0x9]

Never pause here doesn't work on last stable chrome on my fedora machine :(

I've looked at different CRA versions, 0.9.5 works fine, 1.0.0 fails. Not sure if this caused by direct dependencies or deep ones. But this bug is PITA for sure.

[gaearon]

When you say "fails" what do you mean?

The fact that this error gets displayed on reload?

[gaearon]

You can fix this by investigating why Webpack does this and maybe sending a PR that would work around it. :-)

[mk0x9]

Nope, chrome debugger stops execution on this line even when Never pause here toggled on that line.

--
Well indeed :)
Anyway if @TheLarkInn, @sokra or @SpaceK33z would shed any light on this isue it would help.

[gaearon]

This is the underlying Chrome issue: https://bugs.chromium.org/p/chromium/issues/detail?id=465666
Seems like Promise semantics are at odds with debugger semantics.

[gaearon]

Filed https://github.com/webpack/webpack/issues/5175.

[gaearon]

Is anyone interested in trying the fix in https://github.com/webpack/webpack/issues/5175#issuecomment-312803913?

[justingrant]

Apparently this fix was included in webpack 3.4.0 released 2 weeks ago. When will create-react-app be updated to this (or later) webpack?

[gaearon]

We’ve been in a crunch mode shipping React 16, and I’m going on vacation today. So unless @Timer or @fson can lend a hand with getting a release out, we’ll resume publishing new versions in September.

[Timer]

Released v1.0.11, @justingrant! Please give it a go.

[raymondsiu]

@Timer It looks like v1.0.11 solved the Webpack issue, but now I am getting a debugger pause on Redux combineReducers.js line 93: assertReducerSanity(finalReducers);

[gaearon]

Maybe there's a legitimate error there? Either way, I think we can close this. You can bring up Redux issues in its repo. :-)

[iturgeon]

Finally looked this up after being annoyed by it for a little while - can verify that the update to v1.0.11 fixed the issue here @Timer 👍

Though I'm not using Redux, so I can't verify the issue @rayjsiu is experiencing.

[raymondsiu]

@gaearon @iturgeon @Timer
I updated Redux from 3.6.0 (had the issue) to 3.7.2 and the issue has gone away.
Yay! Back to feedback looping...