[HMR] Cannot apply update. Need to do a full reload! #125

orlandodemauro · 2017-01-26T10:51:55Z

Hi guys,

we started to use electrode to build our webApp moving away from a custom configuration. What I notice is that there is a issue with webpack hot reloader. The app is losing the state every time that I apply a change and this is what the use of hot-reloader is suppose to avoid.

I'm running the dev server using gulp hot and every time that I apply a change the server is restarted because of this error:

[HMR] Cannot apply update. Need to do a full reload!

[HMR] Error: Aborted because 786 is not accepted
    at hotApply (http://127.0.0.1:2992/js/main.bundle.dev.js:391:31)
    at hotUpdateDownloaded (http://127.0.0.1:2992/js/main.bundle.dev.js:304:13)
    at hotAddUpdateChunk (http://127.0.0.1:2992/js/main.bundle.dev.js:284:13)
    at webpackHotUpdateCallback (http://127.0.0.1:2992/js/main.bundle.dev.js:5:12)
    at http://localhost:2992/js/0.41f46421a9e3394cf431.hot-update.js:1:1

I'm using

if (module.hot) {
   module.hot.accept();
 }

but this doesn't fix the issue. any suggestion? thanks a milion

The text was updated successfully, but these errors were encountered:

orlandodemauro · 2017-01-26T11:43:09Z

UPDATE

moving

if (module.hot) {
   module.hot.accept();
 }

in app.jsx and making a change to a component I got:

[HMR] Waiting for update signal from WDS...
[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled. 
[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] Updated modules:
[HMR]  - 785
[HMR]  - 739
[HMR]  - 271
[HMR]  - 76
[HMR] App is up to date.

The errors are not displayed and the page is not refreshed but the updates are not applied to the webapp

lnaia · 2017-01-26T12:35:04Z

I've been searching the causes of the error, and I've found it mentioned:
webpack/webpack-dev-server#395

Here is an example of the problem with the same exact issue:
https://github.com/joual/hmrbreak

I've downloaded a fresh sample of electrode, and the problem exists if you choose to preserve the log. So the issue was never fixed after all, and .. never worked.

orlandodemauro · 2017-01-26T12:42:04Z

@darkbls I found the same issue and It is fixed.
the hot-reloader is working properly using webpack-dev-server without electrode.

jchip · 2017-01-26T20:53:54Z

Hi thanks for reporting the issue. We will look into it.

orlandodemauro · 2017-01-26T21:30:27Z

@jchip I was checking the webpack.hot config and I noticed that the entry point is set to use the port 2992 but the app is running on 3000, this might be the reason why even with module.hot.accept the components are not updated.

jchip · 2017-01-26T21:35:53Z

I have a pending PR #124 that syncs a lot of our internal changes and updates. I just tested gulp hot on it with the universal-react-node sample and it works. Also helped me catch a miss on hot.js for the PR.

orlandodemauro · 2017-01-27T09:18:47Z

@jchip do you know when this improvement will be available? thank you

jchip · 2017-01-27T20:57:38Z

@orlandodemauro can you try out the sample universal-react-node locally and verify HMR work as you expected?

clone the repo
npm install
gulp samples-local
cd samples/universal-react-node
npm install
gulp hot

thanks.

lnaia · 2017-01-27T21:04:35Z

Tried it this morning, and right now as well:

orlandodemauro · 2017-01-27T21:33:51Z

@jchip I'm having issues installing the packages

Dieters-MacBook-Pro:universal-react-node orlandodemauro$ npm install

> electrode-react-webapp@1.3.0 prepublish /Users/orlandodemauro/git/electrode/packages/electrode-react-webapp
> npm test


> electrode-react-webapp@1.3.0 test /Users/orlandodemauro/git/electrode/packages/electrode-react-webapp
> npm run lint && gulp test


> electrode-react-webapp@1.3.0 lint /Users/orlandodemauro/git/electrode/packages/electrode-react-webapp
> gulp lint

module.js:471
    throw err;
    ^

Error: Cannot find module 'electrode-archetype-njs-module-dev'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/orlandodemauro/git/electrode/packages/electrode-react-webapp/gulpfile.js:1:63)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)

jchip · 2017-01-27T23:42:48Z

@orlandodemauro oh, I missed a step, need to do npm run bootstrap at top level to install modules for all packages in order to be able to install them locally.

Anyways, HMR should be fixed by this PR #128

orlandodemauro · 2017-01-28T00:04:43Z

@jchip I made the same changes that you have in #128 this morning and it wasn't working, maybe because i was missing the set of the dev env variable. I tested your pr locally but the hot reloader is still not working :(

jchip · 2017-01-28T00:15:31Z

I have to remove --hot from CLI and add the HMR plugin in config/webpack/partial/hot.js for it to work. Also note I am using dev.walmart.com instead of localhost. I added that to my /etc/hosts file.

EDIT: the hostname shouldn't matter, but I noticed an error about window undefined using localhost, which didn't seem to affect HMR though.

jchip · 2017-01-28T00:24:47Z

@orlandodemauro is it still doing full reload with PR #128 for you? It is working for me as you can see from my screenshot.

orlandodemauro · 2017-01-28T11:09:42Z

@jchip yes it is, the HMR errors are not displayed but it is doing a full reload of the page every time that i make a change to a component, could it be related to nodemon?

jchip · 2017-01-28T19:42:56Z

@orlandodemauro how do you tell if it's doing a full reload?

orlandodemauro · 2017-01-28T19:53:15Z

@jchip here the steps that I'm doing:

1 brows to todo-app
2 open the redux Dev tool
3 click complete or active
4 check with the devtool that the store has changed
5 make a change to the footer component

Aspected behaviour:
See the changes made to the footer component and the same store status than in point 4, the page is not reloaded

Current behaviour:
The page is reloaded, the redux state is reset to initial state, and the devtool is closed

I think that nodemon is reloading the page.

jchip · 2017-01-28T20:30:20Z

@orlandodemauro hmm... It seems after updated, WDS is doing a Reloading...

That makes the browser do a Navigated.

orlandodemauro · 2017-01-28T21:12:10Z

@jchip this is weird, here https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md an example of what we should see into the console

orlandodemauro · 2017-01-28T21:48:32Z

@jchip here an interesting reading https://medium.com/@rajaraodv/webpacks-hmr-react-hot-loader-the-missing-manual-232336dc0d96#.vqlv2hlko I'll try to play with the config tomorrow.

jchip · 2017-01-30T17:57:39Z

@orlandodemauro ok, fixed. PR updated.

orlandodemauro · 2017-01-30T18:21:09Z

@jchip your PR is still not working for me, I can see the right console log now

[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] Updated modules:
[HMR]  - 501
[HMR]  - 500
[HMR]  - 266
[HMR]  - 79
[HMR] App is up to date.

but the changes are not rendered into the page.

I did some test on my local environment using the old configuration and I have the hot reloader working for the components but for the css. what I did is set the dev environment in the gulp ( hot ) task and replace

babel.loaders = [].concat(["react-hot"], babel.loaders);

with

babel.loaders = [].concat(["react-hot"], babel.loader);
delete babel.loader

in webpack.config.hot because babel.loaders was undefined when passed to concat.

I hope this can help

jchip · 2017-01-30T18:44:43Z

@orlandodemauro it is working for me. See the new animation I uploaded to the PR.

jchip · 2017-01-30T18:49:06Z

@orlandodemauro thanks for the info on babel.loader. That was indeed the problem. Which I fixed in the PR: https://github.com/electrode-io/electrode/pull/128/files#diff-32b4a8f309f74f9c3cf25155f5e4f8c2R17

orlandodemauro · 2017-01-30T18:53:28Z

@jchip is it working for CSS update as well?

jchip · 2017-01-30T18:56:26Z

no, maybe some other postcss hot loader is needed?

jchip · 2017-01-30T20:33:55Z

@orlandodemauro closing out this issue. could you submit a new one for CSS HMR please?

orlandodemauro · 2017-01-31T11:23:47Z

@jchip I have a fix :) I'll open the issue and the pr soon thanks for your fast fix

Added istanbul config for various coverage scenarios

jchip added the bug label Jan 26, 2017

jchip mentioned this issue Jan 27, 2017

Deprecation warnings and HMR #37

Closed

jchip closed this as completed Jan 30, 2017

orlandodemauro mentioned this issue Jan 31, 2017

[HMR] css are not updated in hot mode #135

Closed

aweary pushed a commit to aweary/electrode that referenced this issue Feb 24, 2017

Merge pull request electrode-io#125 from pjayago/master

4ce02ab

Added istanbul config for various coverage scenarios

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[HMR] Cannot apply update. Need to do a full reload! #125

[HMR] Cannot apply update. Need to do a full reload! #125

orlandodemauro commented Jan 26, 2017

orlandodemauro commented Jan 26, 2017 •

edited

Loading

lnaia commented Jan 26, 2017

orlandodemauro commented Jan 26, 2017

jchip commented Jan 26, 2017

orlandodemauro commented Jan 26, 2017 •

edited

Loading

jchip commented Jan 26, 2017

orlandodemauro commented Jan 27, 2017 •

edited

Loading

jchip commented Jan 27, 2017

lnaia commented Jan 27, 2017

orlandodemauro commented Jan 27, 2017

jchip commented Jan 27, 2017

orlandodemauro commented Jan 28, 2017

jchip commented Jan 28, 2017 •

edited

Loading

jchip commented Jan 28, 2017

orlandodemauro commented Jan 28, 2017

jchip commented Jan 28, 2017

orlandodemauro commented Jan 28, 2017

jchip commented Jan 28, 2017

orlandodemauro commented Jan 28, 2017 •

edited

Loading

orlandodemauro commented Jan 28, 2017

jchip commented Jan 30, 2017

orlandodemauro commented Jan 30, 2017 •

edited

Loading

jchip commented Jan 30, 2017

jchip commented Jan 30, 2017

orlandodemauro commented Jan 30, 2017

jchip commented Jan 30, 2017

jchip commented Jan 30, 2017

orlandodemauro commented Jan 31, 2017

[HMR] Cannot apply update. Need to do a full reload! #125

[HMR] Cannot apply update. Need to do a full reload! #125

Comments

orlandodemauro commented Jan 26, 2017

orlandodemauro commented Jan 26, 2017 • edited Loading

lnaia commented Jan 26, 2017

orlandodemauro commented Jan 26, 2017

jchip commented Jan 26, 2017

orlandodemauro commented Jan 26, 2017 • edited Loading

jchip commented Jan 26, 2017

orlandodemauro commented Jan 27, 2017 • edited Loading

jchip commented Jan 27, 2017

lnaia commented Jan 27, 2017

orlandodemauro commented Jan 27, 2017

jchip commented Jan 27, 2017

orlandodemauro commented Jan 28, 2017

jchip commented Jan 28, 2017 • edited Loading

jchip commented Jan 28, 2017

orlandodemauro commented Jan 28, 2017

jchip commented Jan 28, 2017

orlandodemauro commented Jan 28, 2017

jchip commented Jan 28, 2017

orlandodemauro commented Jan 28, 2017 • edited Loading

orlandodemauro commented Jan 28, 2017

jchip commented Jan 30, 2017

orlandodemauro commented Jan 30, 2017 • edited Loading

jchip commented Jan 30, 2017

jchip commented Jan 30, 2017

orlandodemauro commented Jan 30, 2017

jchip commented Jan 30, 2017

jchip commented Jan 30, 2017

orlandodemauro commented Jan 31, 2017

orlandodemauro commented Jan 26, 2017 •

edited

Loading

orlandodemauro commented Jan 26, 2017 •

edited

Loading

orlandodemauro commented Jan 27, 2017 •

edited

Loading

jchip commented Jan 28, 2017 •

edited

Loading

orlandodemauro commented Jan 28, 2017 •

edited

Loading

orlandodemauro commented Jan 30, 2017 •

edited

Loading