NativeScript / NativeScript/nativescript-cli

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

Đang mở
#5,299 0 bình luận 1 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Ngôn ngữ chính
JavaScript
Star
1.1k
Fork
204
Merge trung bình
1 ngày 9 giờ
Pull request đã merge (30 ngày)
8

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Hướng nghiên cứu

Tái hiện vấn đề từ NativeScript-Vue class-components sample bằng Vue CLI template và TypeScript. Bắt đầu bằng cách theo dõi đầu ra HMR qua routes.ts và main.ts khi VistaPrueba.vue thay đổi; hoàn thành khi bản cập nhật được áp dụng mà không cần khởi động lại ứng dụng và lỗi unaccepted-module được báo cáo không còn xảy ra.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
javascript, typescript, webpack
Lĩnh vực
cli, mobile-dev, tooling
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Cần làm rõ
Mức phù hợp với người mới
25/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.