Nativescript-vue: hmr not working correctly

Created on 30 Jul 2019  Â·  6Comments  Â·  Source: nativescript-vue/nativescript-vue

my package.json file and the node-sass can't be installed in my pc

{
"name": "kiosque",
"version": "1.0.0",
"nativescript": {
"id": "cd.fabiyo.kiosque",
"tns-android": {
"version": "6.0.1"
}
},
"author": "[email protected]",
"dependencies": {
"nativescript-theme-core": "^2.0.4",
"nativescript-vue": "^2.4.0",
"tns-core-modules": "~6.0.3"
},
"devDependencies": {
"@babel/core": "~7.5.5",
"@babel/preset-env": "~7.5.5",
"babel-loader": "~8.0.6",
"nativescript-dev-webpack": "^1.0.2",
"nativescript-vue-template-compiler": "~2.4.0",
"vue-loader": "~15.7.1"
}
}

when I execute tns run android, everything is ok but when I modif a file, app.vue I have as result
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.4.0)} -> CreateElement(NativeFrame)'
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.4.0)} -> CreateElement(NativePage)'
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.4.0)} -> CreateElement(NativeActionBar)'
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.4.0)} -> CreateElement(nativenavigationbutton)'
JS: [Vue warn]: Invalid handler for event "tap": got undefined
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.4.0)} -> AppendChild(ElementNode(nativeactionbar), ElementNode(nativenavigationbutton))'
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.4.0)} -> AppendChild(ElementNode(nativepage), ElementNode(nativeactionbar))'
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.4.0)} -> CreateElement(nativestacklayout)'
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.4.0)} -> CreateElement(nativelabel)'
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.4.0)} -> AppendChild(ElementNode(nativestacklayout), ElementNode(nativelabel))'
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.4.0)} -> AppendChild(ElementNode(nativepage), ElementNode(nativestacklayout))'
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.4.0)} -> AppendChild(ElementNode(nativeframe), ElementNode(nativepage))'
JS: HMR: The following modules were updated:
JS: HMR: ↻ ../node_modules/babel-loader/lib/index.js!../node_modules/vue-loader/lib/index.js?!./components/App.vue?vue&type=script&lang=js&
JS: HMR: ↻ ./components/App.vue?vue&type=script&lang=js&
JS: HMR: ↻ ./components/App.vue
JS: HMR: Successfully applied update with hmr hash 07fe74e64a8aa4904377. App is up to date.
Refreshing application on device 192.168.193.101:5555...
Successfully synced application cd.fabiyo.kiosque on device 192.168.193.101:5555.

but the changement is not appliqued on the emulator !!!

low

Most helpful comment

hmr is fucked up in nativescript-vue, you can take any template, there will time where the app on emulator ( or real device ) will not be refreshed and the only solution is to kill and relaunch the 'tns debug' command

All 6 comments

Your issue has been tagged as low priority because it did not follow our issue guidelines.

If you believe your issue should be higher priority please close this issue and create a new one
using the issue helper.

Thanks for your understanding.

If I change the file .vue, there is no changement on emulator but if I replace the .vue by .js file so the application is automatical restarded. The hmr is not working as video on youtube. hmr is working legacy workflow and no bundle workflow

hmr is fucked up in nativescript-vue, you can take any template, there will time where the app on emulator ( or real device ) will not be refreshed and the only solution is to kill and relaunch the 'tns debug' command

Actually it's very disturbing and sometimes it takes a long time to refresh automatically, it is absolutely necessary to revise this system on nativescript-view

I've experienced similar issues and there are 2 ways I'm getting around this with:

  1. By navigating away and back to your component so Vue re-renders the component with the updated changes.

  2. For more serious cases, you can update a dummy variable in your Vuex stores if you use them (foo: 1), this will trigger a rebuild of the JS parts and is still much faster than a whole rebuild with tns debug. I believe you can also do the same by making a dummy change in main.js or any other "lower-level" JS file although I haven't done this consciously to confirm if it will work.

It's very embarrassing, by changing the file main.ts in hand.js, it worked normally and then now nothing works.
it takes a definitive solution.
Thank you, I will apply your advice and see

Was this page helpful?
0 / 5 - 0 ratings