NativeScript / NativeScript/nativescript-cli

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

Ouverte
#5,299 0 commentaires 1 réaction 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Langage dominant
JavaScript
Étoiles
1.1k
Forks
204
Merge moyen
1 j 9 h
PR mergées (30 j)
8

Description

Environment

  • CLI: 6.5.0
  • Cross-platform modules: 6.5.1
  • Android Runtime: 6.5.0
  • iOS Runtime: 6.5.0
  • Plugin(s):
"dependencies": {
		"@nativescript/core": "^6.5.1",
		"@nstudio/nativescript-checkbox": "^1.0.0",
		"@nstudio/nativescript-loading-indicator": "^3.0.1",
		"@vue/devtools": "^5.3.3",
		"class-validator": "^0.11.0",
		"easytimer.js": "^4.1.1",
		"moment": "^2.24.0",
		"nativescript-accordion": "^6.0.0-beta.2",
		"nativescript-background-http": "^4.2.1",
		"nativescript-camera": "^4.5.0",
		"nativescript-carousel": "^6.1.1",
		"nativescript-localize": "^4.2.0",
		"nativescript-material-button": "^3.2.1",
		"nativescript-material-cardview": "^3.2.1",
		"nativescript-material-dialogs": "^3.2.1",
		"nativescript-material-snackbar": "^3.2.1",
		"nativescript-modal-datetimepicker": "^1.2.2",
		"nativescript-oauth2": "2.1.1",
		"nativescript-platform-css-free": "^1.6.16",
		"nativescript-socketio": "^3.3.1",
		"nativescript-theme-core": "^1.0.6",
		"nativescript-toasty": "^3.0.0-alpha.2",
		"nativescript-vue": "^2.4.0",
		"nativescript-vue-devtools": "^1.2.0",
		"nativescript-vue-navigator": "^1.2.0",
		"tns-core-modules": "^6.5.1",
		"vue-class-component": "^7.1.0",
		"vue-property-decorator": "^8.3.0",
		"vuex": "^3.1.2",
		"vuex-class-component": "^2.2.1"
	},

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...
Hash: f3db0b4d65ebc3ab3400
Version: webpack 4.27.1
Time: 1142ms
Built at: 04/15/2020 3:40:41 PM
                                    Asset      Size   Chunks             Chunk Names
     609c813aedb0d81fb57e.hot-update.json  48 bytes           [emitted]  
bundle.609c813aedb0d81fb57e.hot-update.js  32.9 KiB   bundle  [emitted]  bundle
                                bundle.js  2.46 MiB   bundle  [emitted]  bundle
                               runtime.js  71.4 KiB  runtime  [emitted]  runtime
 + 1 hidden asset
Entrypoint bundle = runtime.js vendor.js bundle.js bundle.609c813aedb0d81fb57e.hot-update.js
[../node_modules/ts-loader/index.js?!../node_modules/vue-loader/lib/index.js?!./pages/VistaPrueba.vue?vue&type=script&lang=ts&] ../node_modules/ts-loader??ref--6!../node_modules/vue-loader/lib??vue-loader-options!./pages/VistaPrueba.vue?vue&type=script&lang=ts& 2.15 KiB {bundle} [built]
[../node_modules/vue-loader/lib/loaders/templateLoader.js?!../node_modules/vue-loader/lib/index.js?!./pages/VistaPrueba.vue?vue&type=template&id=f4390c96&scoped=true&] ../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../node_modules/vue-loader/lib??vue-loader-options!./pages/VistaPrueba.vue?vue&type=template&id=f4390c96&scoped=true& 1.49 KiB {bundle} [built]
[./ sync ^\.\/app\.(css|scss|less|sass)$] . sync nonrecursive ^\.\/app\.(css|scss|less|sass)$ 175 bytes {bundle} [built]
[./ sync recursive (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|kt|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$] . sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|kt|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$ 1.25 KiB {bundle} [built]
[./pages/VistaPrueba.vue] 1.11 KiB {bundle} [built]
[./routes.ts] 8.18 KiB {bundle} [built]
    + 1042 hidden modules
Webpack compilation complete. Watching for file changes.
Webpack build done!
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.

  1. npm install -g @vue/cli @vue/cli-init
  2. vue init nativescript-vue/vue-cli-template hmrbug. (Select Typescript)
  3. npm i vue-class-component
  4. 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.

Sample project
NativeScript-Vue with Class Components

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Reproduisez le problème de l’exemple NativeScript-Vue class-components en utilisant le modèle Vue CLI et TypeScript. Commencez par suivre la sortie HMR à travers routes.ts et main.ts lorsque VistaPrueba.vue est modifié ; le travail est terminé lorsque la mise à jour est appliquée sans redémarrer l’application et que l’erreur unaccepted-module signalée ne se produit plus.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
javascript, typescript, webpack
Domaine
cli, mobile-dev, tooling
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
À clarifier
Accessibilité débutants
25/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.