NativeScript / NativeScript/nativescript-cli

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

オープン
#5,299 コメント 0 件 リアクション 1 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

主要言語
JavaScript
スター
1.1k
フォーク
204
平均マージ
1日 9時間
マージ済み PR(30日)
8

説明

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

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

Vue CLI template と TypeScript を使用して、NativeScript-Vue class-components sample の問題を再現します。VistaPrueba.vue が変更されたときの HMR 出力を routes.ts と main.ts を通して追跡することから始めます。アプリケーションを再起動せずに更新が適用され、報告された unaccepted-module エラーが発生しなくなれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
javascript, typescript, webpack
領域
cli, mobile-dev, tooling
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
説明が足りない
初心者へのやさしさ
25/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。