nativescript-vue: HMR not working in script tags after applying workaround

Yes, me and my team want this guidance.

The only thing that’s make me sad it’s that NativeScript team sell’s to the world that it’s a normal feature, you can find many videos on YouTube of people doing this normally (but ever only with the simple template) or even here in Github in the major issue about it, some people saying that HMR works and even in the official documentation you can find mentions about it.

Look, we are here at 3 days talk about it and reading your response was clear to me, you already knew the result of of these ‘workaround’. Starting the fact that (I don’t know why) you rename my issue. I’m not opened this issue to talk about the ‘React-NativeScript’ workaround, it’s about HMR not working in NSVue at all.

The community has to know the truth, officially, and this needs to be in the documentation (that’s another thing that need a HUGE upgrade now with NS7).

https://nativescript-vue.org/en/docs/getting-started/upgrade-guide/#optional-step-9-try-hmr

Again, I want help you and I can help, I love the idea behind NativeScript, but I’m not agree with you, HMR it’s necessary A LOT to do real products using NS and Vue, not just playing with Angular or Typescript.

And at the final, I just saying all of this, because I know you are a member of @nstudio team and now that you get the NS from Progress, I need claim this to you as a group.

So well, for now, that’s all folks, forget about it, according to the creator of NSVue, it’s not important. Let’s continue with the dream to use this.

I really hope there’s a fix to this HMR issue asap. I really don’t want to goto ReactNative, cause I love Vue soooo much. This solution isn’t ideal at all… And it’s weird that it works for me for <template/> and <script/> but doesn’t work for some people.

With version 6 of nativescript, I had managed to get hmr to work correctly, except when changing the main.ts file because I am working with nativescript-vue in the typescript language, and since version 7 of nativescript, it is necessary believing that the hmr has not been taken into account see totally ignored, it is an important feature which helps to go fast but hey it’s really disappointing that this is just a dream and nothing else. I think this should be taken seriously in the next update

I Love Vue and Nativescript, I am agreeing with you.

I also keep looking for NS Vue 3. We want to help and able to help but seems the the author is exhausted

in his quote “progress has been slow, as I frankly didn’t have time/motivation to do it”.

😦

@luiguild I added my sample repo. Was lazy to create a new one. I can confirm that any changes in <script/> does not work. Sometimes <template/> works, and <style/> only work with changing the css rule of a line. If you add a new css rule, it updates, but if you try to remove the rule, it doesn’t work, it still shows on the UI. So, this is not really a good workaround for me. @nativescript-vue-bot please flag this case as high priority. 😃

@luiguild that repo is old. Let me create a new repo, and put my workaround solution. Will do it soon. Still in bed 😃

@PolCPP I have the following configuration and it does not work for me, I am on windows with android. I understand that with Nativescrip 7.1 it should already work by default without having to do anything, right?

"dependencies": {
    "@nativescript-community/ui-svg": "0.0.5",
    "@nativescript/core": "^7.1.0",
    "@nativescript/firebase": "^11.1.3",
    "@vue/devtools": "^5.3.3",
    "axios": "^0.21.1",
    "moment": "^2.29.1",
    "nativescript": "^7.1.2",
    "nativescript-admob": "^4.1.0",
    "nativescript-camera": "^4.5.0",
    "nativescript-fonticon": "^2.0.2",
    "nativescript-permissions": "^1.3.11",
    "nativescript-socketio": "^3.3.1",
    "nativescript-tailwind": "^1.3.0",
    "nativescript-toasty": "^3.0.0-alpha.2",
    "nativescript-ui-listview": "^9.1.0",
    "nativescript-vue": "^2.8.1",
    "nativescript-vue-devtools": "^1.4.0",
    "nativescript-vue-navigator": "^1.2.0",
    "nativescript-vue-shadow-ns-7": "^10.1.0",
    "vuex": "^3.5.1"
  },
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "@nativescript/android": "7.0.1",
    "@nativescript/types": "^7.1.0",
    "@nativescript/webpack": "^3.0.8",
    "@types/node": "^14.6.2",
    "babel-loader": "^8.1.0",
    "nativescript-vue-template-compiler": "^2.8.1",
    "nativescript-worker-loader": "~0.12.1",
    "sass": "^1.26.10",
    "typescript": "^3.9.7",
    "vue": "^2.6.12",
    "vue-loader": "^15.9.3"
  }

It also doesn’t work in nativescript 7.1 😪

re:

• <script>: cannot work if it has to re-render a <Page> (this can happen even if you edit a child component, if Vue diffs the changes and determines that a full re-render is required) due to the way frames and pages are handled in NativeScript. They are not child-nodes in the pseudo-dom. This is not trivial to fix without significant changes in both NativeScript and NativeScript-Vue. For functionality changes, it’s recommended to use --no-hmr as that approach while slightly slower - is working fine.
• <style>: removing styles doesn’t work because NativeScript doesn’t yet have the mechanism to remove styles from the global style scope: see https://github.com/nativescript-vue/nativescript-vue/issues/425 for details. This is again something that we need to implement in NativeScript and the apply-css-loader.
• <template>: should work for the most part, unless it triggers a full re-render of a <Page> tag (as described in the <script> section above).

Some suggestions to improve the dx until the above issues are resolved/fixed:

• Use --no-hmr when working on logic changes (<script>).
• If you are working on a page that you need to navigate to from the initial screen, temporarily set that screen as the initial screen
• Use HMR to tweak styles (change values, colors etc), but don’t remove styles. Generally it’s best to get the roughing done with --no-hmr and then do fine-detail-tweaks with it enabled.
• If you like TailwindCSS - use nativescript-tailwind to style your UI - this works much better with HMR since we are not adding/removing css, just changing classes on elements, so the style removal issues are not present.

This is not a high priority issue, as there are many more higher-impact things to move the ecosystem forward - however if anyone feels like dipping their feet into contributing, we are more than happy to give guidance as necessary!

Same here, without this “feature”, the time for testing and debugging is very exhausting.

Amazing! It is really comfortable to work like that, although there are times when it gets stuck but it continues to reward. I had read the post but I had not noticed the upload of @nativescript/webpack. Thank you!

@vallemar read the upgrade guide: https://nativescript.org/blog/nativescript-7-1-hmr-reenabled-and-xcode-12-3-support/

You are still on "@nativescript/webpack": "^3.0.8",

@vallemar It does work, tried it briefly on android and it was pretty much the same as 6.5.x.

Me too. I almost give up. I’m still thinking about moving back to Flutter. But I love TypeScript.