Electron-react-boilerplate: Live reload loads old content

[williamoliveira]

When it does full page reload it loads with the old version
I dont know how to explain it better so I made a quick video to demonstrate: https://youtu.be/xk-4Q0YAIlw

[amilajack]

Interesting. Also thanks for the recording. Makes it so much easier for me to see what's going on on your end. If you haven't change anything in the boilerplate after cloning it, it may be because your dependencies are outdated or mismatching. Using yarn will most likely fix this kind of issue:

git pull --all
npm i -g yarn
rm -rf node_modules
yarn

[williamoliveira]

Did not fix
It is a clean clone and I was already using yarn

yarn --version
0.22.0

[amilajack]

try cleaning the yarn cache

yarn cache clean

and then repeat the previous steps. Debugging this is hard because I can't seem to reproduce this issue 😢

[aemixdp]

Same issue for me.
Started using electron-react-boilerplate few hours ago.

yarn --version
0.22.0
node --version
v7.3.0
webpack --version
2.3.3

Edit: Removed global webpack to check, doesn't help.
Text editor doesn't matter too: tried both in vscode and plain notepad.

[williamoliveira]

Cleaned yarn cache, the problem persists

[Slapbox]

Are you using any node native modules? An example would be electron-spellchecker

This module may have been the cause of some issues I've had, but I cannot confirm this is the cause yet.

[anthonyraymond]

I'm also afected since i rebased from #856 to #898. It may be related to DLL config, since i also often encounter #905 on reload

[Slapbox]

@anthonyraymond See my comments on #905. I will continue to update based on my findings.

[amilajack]

Would be great if everyone here could test out https://github.com/chentsulin/electron-react-boilerplate/pull/914

[williamoliveira]

No luck
But it seems to fix #905 that I was having too sometimes

By the way, why aren't we using HtmlWebpackPlugin?

[amilajack]

@williamoliveira thats the proper solution for this. Would be great if you could PR to use HtmlWebpackPlugin instead. I don't have much time on my hands this week

[williamoliveira]

I will try

[williamoliveira]

I managed to get HtmlWebpackPlugin working, I will do some more manual testing and PR it after
But unfortunately it did not fix this issue :/

Edit: #916

[amilajack]

Can someone please confirm that https://github.com/chentsulin/electron-react-boilerplate/pull/916 resolves the race condition issue? I am not experiencing the race condition issue myself so its impossible to me to test this

[williamoliveira]

It did not, but fixes #905 at least

[nocategory]

Didn't for me as well, can't comment on #905 though since I rarely got that error.

[amilajack]

Try commenting the DllReferencePlugin in webpack.config.renderer.dev.js and removing the dynamic script injection code. I'm almost certain this will work.

[williamoliveira]

Was just going to test this when you commented, but didn't work

I noticed that if I reload the page manually a second after it auto reloads it comes with the new bundle.js, it is as if webpack-dev-server is not waiting for the bundle.js to be written before reloading the page

[nocategory]

Didn't work for me as well, can confirm what william is saying.

[amilajack]

If you commented the script injection for the dll, it shouldnt be loading it. Maybe its the cache? Maybe try doing a fresh clone and apply those changes. Should work in theory

[williamoliveira]

If you disable the dll plugin all the vendor gets rendered to bundle.js, works as normal, but the problem continues, it loads the old bundle.js on auto reload

[williamoliveira]

Found something, removing multiStep: true from HotModuleReplacementPlugin fixed it
What is it for? didnt noticed any side effects yet

[nocategory]

Can confirm it's working after removing it as @williamoliveira suggested. After a quick search on google about HMR and multistep, it looks like Webpack 2 doesn't go very well with multistep...

EDIT: https://github.com/jantimon/html-webpack-plugin/issues/533 (HMR multiStep mode is broken in webpack 2)

[amilajack]

multiStep allows webpack to add incremental hot reloading in multiple passes. Better for larger projects. Shouldn't make much of a difference for most projects.

[amilajack]

@uppe-r @williamoliveira I have merged both of the PR's you guys have made into the dev-master branch of this repo. That way we can test if both of your changes work properly together.