Nativescript-vue + Typescript - HMR not working on Vue Class Component

Question

Environment

CLI: 6.5.0
Cross-platform modules: 6.5.1
Android Runtime: 6.5.0
iOS Runtime: 6.5.0

Describe the bug

When saving any file with vue class component style + typescript, It simply does not update. Give me the following error:

File change detected. Starting incremental webpack compilation...
Successfully transferred bundle.609c813aedb0d81fb57e.hot-update.js on device emulator-5554.
Successfully transferred 609c813aedb0d81fb57e.hot-update.json on device emulator-5554.
JS: HMR: Checking for updates to the bundle with hmr hash 609c813aedb0d81fb57e.
JS: HMR: Ignored an update to unaccepted module: 
JS: HMR:          ➭ ./routes.ts
JS: HMR:          ➭ ./main.ts
JS: HMR: Cannot apply update with hmr hash 609c813aedb0d81fb57e.
JS: HMR: Aborted because ./routes.ts is not accepted
JS: Update propagation: ./routes.ts -> ./main.ts
Refreshing application on device emulator-5554...
Successfully transferred bundle.js on device emulator-5554.
Successfully transferred runtime.js on device emulator-5554.
Successfully transferred vendor.js on device emulator-5554.
JS: HMR: Cannot apply update. A previous update aborted. Application needs to be restarted in order to apply the changes.
Restarting application on device emulator-5554...

This causes the entire application to restart, with no HRM update.

To Reproduce

Base on nativescript blogs NativeScript-Vue with Class Components More samples on the link.

npm install -g @vue/cli @vue/cli-init
vue init nativescript-vue/vue-cli-template hmrbug. (Select Typescript)
npm i vue-class-component
npm i vue-property-decorator

Next: Create the following template:

<Label text="Hello" textWrap="true" />

Then add a hello to the text

<Label text="Hello Hello" textWrap="true" />

Check the error.

Expected behavior

Use the famous HMR without restarting the entire App. I consider this a severe problem or bug, since it slows down your productivity as developer while waiting to the app to restart.

I think this goes to Github issues, I believe there are known issues with Vue + HMR, I would suggest you to disable HMR (--no-hmr). Of course it's less productive but better than getting struck in the middle of HMR reload every here and then. — Manoj
– Manoj, Commented Apr 15, 2020 at 21:14

score 3 · Accepted Answer · 2020-04-18 07:11:02Z

3

Please use `tns debug android --no-hmr`

In nativescript-vue and HMR is not guarantied. HMR can be used only while making changes in style files.

My personal use

I use tns debug android only for styling. If I make any other change I do not trust HMR.

I have added a yarn script called yarn devan to speed up typing process.

I have added following lines to my package.json file

{
  "scripts": {
    "dev": "tns debug android",
    "devan": "tns debug android --no-hmr",
    "devin": "tns debug ios --no-hmr",
    "un": "adb uninstall com.domain.yourapp"
  },
}

You will always see HMR error message if you use typescipt files in nativescript-vue projects.

JS: HMR: Checking for updates to the bundle with hmr hash 7d5f6392d6103f1496e6.
JS:  WARN  HMR: Ignored an update to unaccepted module: 
JS:  WARN  HMR:          ➭ ./routes/index.ts
JS:  WARN  HMR:          ➭ ./main.ts
JS:  ERROR  HMR: Cannot apply update with hmr hash 7d5f6392d6103f1496e6.
JS:  ERROR  HMR: Aborted because ./routes/index.ts is not accepted
JS: Update propagation: ./routes/index.ts -> ./main.ts

edited Apr 18, 2020 at 7:11

answered Apr 18, 2020 at 7:05

user11387353

Sign up to request clarification or add additional context in comments.

1 Comment

Juan Bonoso Over a year ago

Thanks for your contribution!! . It is disappointing that nativescript does not have HRM with vue yet :C.

Karl Anthony Baluyot · Accepted Answer · 2020-05-17 19:20:18Z

0

I got my Nativescript-Vue + Typescript with HMR project working.Just take note (according to rigor himself, the creator of NS-Vue) that its best to enable HMR when working with styles.

Here is the issue and the thread that solved my problem: https://github.com/Lyduz/nitibo/issues/19

answered May 17, 2020 at 19:20

Karl Anthony Baluyot

1763 silver badges16 bronze badges

Collectives™ on Stack Overflow

Nativescript-vue + Typescript - HMR not working on Vue Class Component

2 Answers 2

Please use `tns debug android --no-hmr`

My personal use

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Please use tns debug android --no-hmr

My personal use

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Please use `tns debug android --no-hmr`