Repository navigation
[Bug] Frequent HMR frequent failures #1095
Description
Environment
-
CLI: 6.2.x (Been happening since 6.0)
-
Cross-platform modules: 6.0 - 6.2.0
-
Android Runtime: 6.0 - 6.2
-
iOS Runtime: 6.0 - 6.3@next
-
Plugin(s): None
-
Node.js: 10.15.3
-
Please, attach your package.json and webpack.config.js as these configurations are usually critical for investigating issues with webpack
testvue.zip
(Please note; these are STOCK from a newly created vue app -- so probably not the issue 😀)
Describe the bug
HMR fails the majority of time
To Reproduce
- tns create testvue (Create empty vue stock app)
- tns run android
- Change the css background value
- First time almost always works; subsequent times fail the majority of the time
Notes:
@vakrilov and I surmise this might be a issue on Linux machine(s), we both did the exact same steps, both of us created a new stock vue app -- his machine HMR worked perfectly. My machine HMR failed.
--no-hmrdoes not improve the situation much (if any).- Plugin changes fail the majority of the time.
- ns-core apps normally work, but occasionally it will fail and continue failing, but ns-vue, ns-angular have frequent issues always.
- Frequently when HMR changes when fail to apply, it will also restart the app (without the changes)
- I have also seen this issue on Mac OSX also frequently.
Expected behavior
Always works 😀
Sample project
Just create a stock vue app
Additional context
Showed issue to @vakrilov at jsmobile conf
--- Log for working
Successfully transferred bundle.3edc8fff861c882d1c39.hot-update.js on device emulator-5554.
Successfully transferred 3edc8fff861c882d1c39.hot-update.json on device emulator-5554.
JS: HMR: Checking for updates to the bundle with hmr hash 3edc8fff861c882d1c39.
Refreshing application on device emulator-5554...
JS: HMR: The following modules were updated:
JS: HMR: ↻ ../node_modules/nativescript-dev-webpack/style-hot-loader.js!../node_modules/nativescript-dev-webpack/apply-css-loader.js!../node_modules/css-loader/dist/cjs.js?!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/sass-loader/lib/loader.js!../node_modules/vue-loader/lib/index.js?!./components/Home.vue?vue&type=style&index=0&id=67410f3a&scoped=true&lang=scss&
JS: HMR: Successfully applied update with hmr hash 3edc8fff861c882d1c39. App is up to date.
JS: 'topmost() is deprecated. Use Frame.topmost() instead.'
Successfully synced application org.nativescript.testvue on device emulator-5554.
Log for failing:
File change detected. Starting incremental webpack compilation...
Webpack compilation complete. Watching for file changes.
Webpack build done!
Successfully transferred bundle.js on device emulator-5554.
Restarting application on device emulator-5554...
JS: HMR: Hot Module Replacement Enabled. Waiting for signal.
JS: 'NativeScript-Vue has "Vue.config.silent" set to true, to see output logs set it to false.'
JS: HMR: Checking for updates to the bundle with hmr hash 3edc8fff861c882d1c39.
JS: HMR: The following modules were updated:
JS: HMR: ↻ ../node_modules/nativescript-dev-webpack/style-hot-loader.js!../node_modules/nativescript-dev-webpack/apply-css-loader.js!../node_modules/css-loader/dist/cjs.js?!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/sass-loader/lib/loader.js!../node_modules/vue-loader/lib/index.js?!./components/Home.vue?vue&type=style&index=0&id=67410f3a&scoped=true&lang=scss&
JS: HMR: Successfully applied update with hmr hash 3edc8fff861c882d1c39. App is up to date.
Successfully synced application org.nativescript.testvue on device emulator-5554.
Activity
rosen-vladimirov commentedon Nov 15, 2019
Hey @NathanaelA ,
Can you send us the output of
tns run android --log traceand send us the generated output, so we can investigate the issue.Also, can you try installing
nativescript-dev-webpack@nextand see if there will be improvement in this area.NathanaelA commentedon Nov 15, 2019
Attached is the logs:
NathanaelA commentedon Nov 15, 2019
Third Test (Upgraded to @next): nativescript-dev-webpack@1.4.0-next-2019-11-10-212313-01
The first change took, the second change took, the third & forth change did the same thing as above where the app reboots but the color from the last success (i.e. the second change) is what the color is...
DimitarTachev commentedon Dec 16, 2019
@NathanaelA,
Sorry for the late reply and thanks for the provided logs!
We had a few similar issues in our 6.2 release and that's the main CLI-related improvement in 6.3. The problem was that we were not uploading all files during app restart which leads to an invalid app state with permanent old content (
runtime.jswhich contains the HMR hash was not properly updated).All of the issues were fixed in the 6.3 release and I suggest you try updating
nativescript-dev-webpack,nativescriptand yourwebpack.config.jsto ourrcversions. The official 6.3 release is planned for this weeks if we don't find any critical issue.If you have a similar issue with the 6.3 versions, please attach the new log traces in order to allow us to investigate it further.