Nativescript-vue: HMR with typescript template

[7ammer]

Version

2.2.2

Reproduction link

Just install the default typescript template

Platform and OS info

Android / nativescript 5.4.2

Steps to reproduce

Install typescript version.

Run npm run android --hmr.

Edit the 'msg' value in the App.vue file.

What is expected?

It hot replaces the 'msg' text without reloading the app.

What is actually happening?

The app reloads.

---

It looks like it can't HMR because it doesn't understand .ts files.

Entrypoint bundle = vendor.js bundle.js bundle.e49b2d08df57ef87e52d.hot-update.js
[./ sync ^\.\/app\.(css|scss|less|sass)$] . sync nonrecursive ^\.\/app\.(css|scss|less|sass)$ 175 bytes {bundle} [built]
[./ sync recursive (root|page)\.(xml|css|js|ts|scss)$] . sync (root|page)\.(xml|css|js|ts|scss)$ 160 bytes {bundle} [built]
[./main.ts] 2.54 KiB {bundle} [built]
      179 hidden modules
Webpack compilation complete. Watching for file changes.
Webpack build done!
Successfully transferred bundle.e49b2d08df57ef87e52d.hot-update.js on device emulator-5554.
Successfully transferred e49b2d08df57ef87e52d.hot-update.json on device emulator-5554.
JS: HMR: Checking for updates to the bundle with hmr hash e49b2d08df57ef87e52d.
JS: HMR: Ignored an update to unaccepted module: 
JS: HMR:          ➭ ./main.ts
JS: HMR: Cannot apply update with hmr hash e49b2d08df57ef87e52d.
JS: HMR: Aborted because ./main.ts is not accepted
JS: Update propagation: ./main.ts
Refreshing application on device emulator-5554...

[rigor789]

@jawa-the-hutt I'm asking you, since you have been working on TS support... Is this supposed to work - or do we need to work on HMR with TS?

[msaelices]

@rigor789 I've just reproduced the error. I will try to fix it tomorrow.

[msaelices]

@rigor789 @jawa-the-hutt, it's very weird, but I noticed that it fails also with the NS angular version.

I did the following:

1. tns create ng-hmr-test --ng
2. cd ng-hmr-test && npm i
3. tns run android --hmr

After changing the src/main.ts I received the same error:

JS: HMR: Checking for updates to the bundle with hmr hash f46bcaee75c6a961f436.
JS: HMR: Ignored an update to unaccepted module: 
JS: HMR:          ➭ ./main.ts
JS: HMR: Cannot apply update with hmr hash f46bcaee75c6a961f436.
JS: HMR: Aborted because ./main.ts is not accepted
JS: Update propagation: ./main.ts
Successfully transferred bundle.js on device emulator-5554.
Successfully transferred runtime.js on device emulator-5554.
Restarting application on device emulator-5554...

[msaelices]

I think it's time to talk to the NS core team, as maybe the nativescript-dev-webpack is causing this error.

[jawa-the-hutt]

I would agree with @msaelices on getting with the NS core team. .ts files won't trigger a clean HMR update for me no matter what I've tried.

The only other issue I've had with HMR is what's documented in https://github.com/nativescript-vue/nativescript-vue/issues/503 with changes in <style> tags. I don't think that issue is a NS Core team issue or if it is, i'm not sure how we'd validate it due to SFC's being vue specific.

[manijak]

Issue present with NS6.0 and 2.3.0 as well. App does not refresh at all.

[ugommirikwe]

Hi guys. Any update on this?

[Fabiyo-90]

J'ai le même souci avec NS6.0 et Vue2.4.0, la console m'indique ceci

'{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 72abb414a052ceab53f6. 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.

mais dans mon émulateur, rien ne se passe. Si je ferme l'application puis l'ouvre de nouveau alors je vois le changement.

Je ne peux pas vraiment travailler ainsi

[msaelices]

I've just checked that I can still reproduce the error with the latest NS versions, both with the Vue and NG bindings.

[7ammer]

Hello,
I've just done tns migrate one my project and HMR seems to be working now.
Might be worth someone else checking before closing the issue though.

[eliottrobson]

I have just created a new project today, and I am receiving this error with latest versions of everything. HMR: Ignored an update to unaccepted module:. This is running through the tns preview command.

[mkrierQape]

last version still broken AF

CONSOLE INFO file:///PATH_TO_APP/node_modules/nativescript-dev-webpack/hot.js:3:0: HMR: The following modules were updated:
CONSOLE INFO file:///PATH_TO_APP/node_modules/nativescript-dev-webpack/hot.js:3:0: HMR: ↻ ./components/App/index.html
CONSOLE INFO file:///PATH_TO_APP/node_modules/nativescript-dev-webpack/hot.js:3:0: HMR: ↻ ./components/App/index.ts
CONSOLE INFO file:///PATH_TO_APP/node_modules/nativescript-dev-webpack/hot.js:3:0: HMR: ↻ ../../node_modules/ts-loader/index.js?!../../node_modules/vue-loader/lib/index.js?!./components/Login/Login.vue?vue&type=script&lang=ts&
CONSOLE INFO file:///PATH_TO_APP/node_modules/nativescript-dev-webpack/hot.js:3:0: HMR: ↻ ./components/Login/Login.vue?vue&type=script&lang=ts&
CONSOLE INFO file:///PATH_TO_APP/node_modules/nativescript-dev-webpack/hot.js:3:0: HMR: ↻ ./components/Login/Login.vue
CONSOLE INFO file:///PATH_TO_APP/node_modules/nativescript-dev-webpack/hot.js:3:0: HMR: Successfully applied update with hmr hash b655209b22e1225b434e. App is up to date.
Successfully synced application MY_APP on device EMULATOR.

either the emulator restart app ( which at least do something ) or it do nothing ( and you have to kill and relaunch debug ) but it never update live

[7ammer]

For me updating main.ts does not work.

However...

updating a scss file works
updating the template in a vue file works
updating a tag's class in a vue file works
updating scripts in a vue file works

[soylomass]

For me updating main.ts does not work.

However...

updating a scss file works
updating the template in a vue file works
updating a tag's class in a vue file works
updating scripts in a vue file works

Does it work in those cases without restarting the whole app?
Did you change any setting for it to work in those cases? Because for me it restarts with any change.

[Fabiyo-90]

I had change the file "main.ts" to "main.js" and hmr work correctly

[7ammer]

For me updating main.ts does not work.
However...
updating a scss file works
updating the template in a vue file works
updating a tag's class in a vue file works
updating scripts in a vue file works

Does it work in those cases without restarting the whole app?
Did you change any setting for it to work in those cases? Because for me it restarts with any change.

I migrated a while back and assumed it was something to do with that. It seems to not be working at all now. I'm back to it just restarting the app. I don't really know why to be honest :(

The only thing I can think after reading the above is that at one point I may have checked a setting in phpstorm to compile typescript to javascript. 🤷‍♂️

[juanbonoso]

Is there any solution yet?

[7ammer]

@shirakaba mentioned on slack the other day about using babel-preset-typescript instead of ts-loader. This didn't work but using babel-preset-typescript-vue showed improvements! HMR seems to now work in .vue files! Unfortunately .ts files still show the same error but it's an improvement. I am also unable to remove vue-loader as it looks like it's required to convert the template to nativescript (compiler: NsVueTemplateCompiler). So, while it's sort of hacky it is at least an interesting development.

From a clean vue typescript project, HMR works when I manipulate these file types:
.scss (was already working).
.vue (template tag & script tag with lang="ts")

module.exports = function (api) {
  api.cache(true)

  return {
    presets: [
        ['@babel/env', { targets: { esmodules: true } }],
        ["babel-preset-typescript-vue"]
    ],
  }
}

            {
                test: /\.(ts)$/,
                loader: 'babel-loader',
            },

            // {
            //         test: /\.ts$/,
            //         loader: 'ts-loader',
            //         options: {
            //             appendTsSuffixTo: [/\.vue$/],
            //             allowTsInNodeModules: true,
            //             compilerOptions: {
            //                 declaration: false
            //             }
            //         },
            //     },
            {
                test: /\.vue$/,
                loader: "vue-loader",
                options: {
                    compiler: NsVueTemplateCompiler,
                },
            },

[7ammer]

I've done some tests and I've realised that any edits made to main.ts / main.js causes a full restart across all of the nativescript flavours. _I didn't know this._ 🤦‍♂️

If there is a .ts file that is then imported into say App.vue _and_ main.ts, then any edit to that imported file will always cause a full restart because it is also in the main.ts file.

So I guess that issue is a nativescript issue and not relative to nativescript-vue.

It seems for now then it is best to avoid putting things in the main.ts / main.js file if you want HMR to work.

|edit |vue |vue ts|vue ts with babel-preset|ts|js|
|--------------------------------------------------------------|-------|--------------|---------------------------|----------|----------|
|scss |HMR |HMR |HMR |HMR |HMR |
|vue/xml |restart|restart |HMR |HMR |HMR |
|edit .ts/.js file imported into App.vue / main-page.ts |restart|restart |HMR |HMR |HMR |
|main.ts |restart|restart |restart |restart |restart |
|edit file Imported into main.ts/main.js |restart|restart |restart |restart |restart |
|edit .ts/.js file that is imported into both main.ts and *.vue/main-page.ts|restart|restart |restart |restart |restart |

[Fabiyo-90]

@7ammer , thank you for your contribution, I had to test and I was satisfied if we compare the situation before you bring us this clarification.
I really like nativescript-vuejs

[shirakaba]

@shirakaba mentioned on slack the other day about using babel-preset-typescript instead of ts-loader.

Here's my Webpack Config for React NativeScript, in case it gives any inspiration.

https://github.com/shirakaba/react-nativescript/blob/28377ee7f1f54b95932b6adaf49964d9f2607d89/sample/react-nativescript.webpack.config.js#L7

I've done some tests and I've realised that any edits made to main.ts / main.js causes a full restart across all of the nativescript flavours. I didn't know this. 🤦‍♂️

In short, yes! I haven't dug into it, but I imagine it's less so an issue with NativeScript but more an issue with the limitations of Webpack HMR, and HMR in general (I believe the same would probably happen in a React DOM app, for example), for updates close to the entrypoint of the app. You could actually probably handle changes even to that file, with the right module.hot.accept invocation, but HMR has always only ever been a best-effort system. Unless you want to deep-dive into it, you just take what you can get.

As a general background, any changes inside Vue components should typically be hot-reloadable; the main exception is when the code that is touched has dependencies on some other module that can't accept the hot update.

Changes outside of Vue components (e.g. in the main body of a module) should be hot-reloadable too, again provided that the code that is touched has no dependencies on modules that can't accept the hot update.