ไม่ได้กำหนด HTMLElement - Nativescript-vue

10

ทั้งหมดที่ฉันพยายามทำ ณ จุดนี้คือให้โครงการทำงาน

ฉันวิ่ง tns run android

แอปพลิเคชั่นนั้นสร้างขึ้นมา แต่เมื่อมันเริ่มต้นแอพและเกิดข้อผิดพลาด

ReferenceError: HTMLElement ไม่ได้ถูกกำหนดไว้

ดังนั้นทั้งหมดนี้เริ่มต้นเมื่อฉันพยายามที่จะนำแกนกลางแบบดั้งเดิม (2.2.0) มาใหม่ ฉันทำตามคำแนะนำที่โพสต์ในหลายแห่ง ทุกอย่างดูดี จากนั้นฉันก็วิ่งtns run androidและได้รับข้อผิดพลาดHTMLElement ไม่ได้ถูกกำหนดไว้เป็นครั้งแรก

จากนั้นฉันตัดสินใจที่จะเริ่มต้นอีกครั้งเพื่อเริ่มต้นด้วยโครงการที่สะอาด ทำตามขั้นตอนที่นี่: https://nativescript-vue.org/en/docs/getting-started/quick-start/

และเมื่อฉันเรียกใช้tns run androidฉันยังคงได้รับข้อผิดพลาดHTMLElementเดียวกันซึ่งไม่ได้กำหนดไว้แม้ในขณะที่ฉันไม่ได้แก้ไขแม่แบบเลย

ฉันไม่รู้ว่านี่เป็นข้อผิดพลาดหรือฉันกำลังทำอะไรผิดปกติอย่างน่ากลัว

tns - รุ่น 6.1.2

node -v 12.10.0

npm -v 6.10.3

ดังนั้นตอนนี้ฉันได้รับข้อผิดพลาดนี้ไม่ว่าฉันจะทำอะไรตอนนี้ ...

รหัสฉลาดเหมือนที่ฉันบอกว่าฉันได้รับข้อผิดพลาดนี้ด้วยการดึงเก็บ repo เทมเพลตนี้: https://github.com/nativescript-vue/vue-cli-template

นี่คือสแต็ค

User-MacBook-Pro:hello-world user$ tns run android
Searching for devices...
Preparing project...
Bundling application for entryPath ./main...
File change detected. Starting incremental webpack compilation...

webpack is watching the files…

[BABEL] Note: The code generator has deoptimised the styling of /Users/scottbaron/Mos-Commodo/social-platform/peak-app/peak-matching/node_modules/@vue/devtools/build/backend.js as it exceeds the max of 500KB.
Hash: d11e779b2f173a00da85
Version: webpack 4.27.1
Time: 13195ms
Built at: 11/02/2019 10:57:09 AM
                             Asset       Size   Chunks             Chunk Names
assets/images/NativeScript-Vue.png   8.22 KiB           [emitted]  
                         bundle.js   84.3 KiB   bundle  [emitted]  bundle
                      package.json  165 bytes           [emitted]  
                        runtime.js   71.4 KiB  runtime  [emitted]  runtime
               tns-java-classes.js    0 bytes           [emitted]  
                         vendor.js   9.45 MiB   vendor  [emitted]  vendor
Entrypoint bundle = runtime.js vendor.js bundle.js
[./ sync ^\.\/app\.(css|scss|less|sass)$] . sync nonrecursive ^\.\/app\.(css|scss|less|sass)$ 175 bytes {bundle} [built]
[./ sync recursive (?<!\bApp_Resources\b.*)\.(xml|css|js|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$] . sync (?<!\bApp_Resources\b.*)\.(xml|css|js|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$ 204 bytes {bundle} [built]
[./app.scss] 18.5 KiB {bundle} [optional] [built]
[./main.js] 1.96 KiB {bundle} [built]
[./package.json] 146 bytes {bundle} [optional] [built]
[./store.js] 142 bytes {bundle} [built]
    + 208 hidden modules
Webpack compilation complete. Watching for file changes.
Webpack build done!
Project successfully prepared (android)
Building project...
Gradle build...
         + setting applicationId
         + applying user-defined configuration from /Users/scottbaron/Mos-Commodo/social-platform/peak-app/peak-matching/app/App_Resources/Android/app.gradle
         + using andorid X library androidx.legacy:legacy-support-v4:1.0.0
         + adding nativescript runtime package dependency: nativescript-optimized-with-inspector
         + adding aar plugin dependency: /Users/scottbaron/Mos-Commodo/social-platform/peak-app/peak-matching/node_modules/nativescript-socketio/platforms/android/fancylogger-release.aar
         + adding aar plugin dependency: /Users/scottbaron/Mos-Commodo/social-platform/peak-app/peak-matching/node_modules/tns-core-modules-widgets/platforms/android/widgets-release.aar
Project successfully built.
The build result is located at: /Users/scottbaron/Mos-Commodo/social-platform/peak-app/peak-matching/platforms/android/app/build/outputs/apk/debug/app-debug.apk
Installing on device 89EY06CQP...
Successfully installed on device with identifier '89EY06CQP'.
Restarting application on device 89EY06CQP...
System.err: An uncaught Exception occurred on "main" thread.
System.err: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Error calling module function 
System.err: ReferenceError: HTMLElement is not defined
System.err: File: "file:///node_modules/@vue/devtools/build/hook.js:517:28
System.err: 
System.err: StackTrace: 
System.err:     Frame: function:'handleCopy', file:'file:///node_modules/@vue/devtools/build/hook.js:517:28
System.err:     Frame: function:'clone', file:'file:///node_modules/@vue/devtools/build/hook.js:637:11
System.err:     Frame: function:'', file:'file:///node_modules/@vue/devtools/build/hook.js:199:24
System.err:     Frame: function:'on', file:'file:///node_modules/@vue/devtools/build/hook.js:145:11
System.err:     Frame: function:'emit', file:'file:///node_modules/@vue/devtools/build/hook.js:179:17
System.err:     Frame: function:'devtoolPlugin', file:'file:///node_modules/vuex/dist/vuex.esm.js:54:14
System.err:     Frame: function:'Store', file:'file:///node_modules/vuex/dist/vuex.esm.js:356:4
System.err:     Frame: function:'./store.js', file:'file:///app/store.js:6:15
System.err:     Frame: function:'__webpack_require__', file:'file:///app/webpack/bootstrap:750:0
System.err:     Frame: function:'fn', file:'file:///app/webpack/bootstrap:120:0
System.err:     Frame: function:'', file:'file:///app/main.js:1:0
System.err:     Frame: function:'./main.js', file:'file:///data/data/com.moscommodo.peak/files/app/bundle.js', line: 339, column: 30
System.err:     Frame: function:'__webpack_require__', file:'file:///app/webpack/bootstrap:750:0
System.err:     Frame: function:'checkDeferredModules', file:'file:///app/webpack/bootstrap:43:0
System.err:     Frame: function:'webpackJsonpCallback', file:'file:///app/webpack/bootstrap:30:0
System.err:     Frame: function:'', file:'file:///data/data/com.moscommodo.peak/files/app/bundle.js', line: 2, column: 57
System.err:     Frame: function:'require', file:'', line: 1, column: 266
System.err: 
System.err: 
System.err: ReferenceError: HTMLElement is not defined
System.err: 
System.err: StackTrace:
System.err: java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Error calling module function 
System.err: ReferenceError: HTMLElement is not defined
System.err: File: "file:///node_modules/@vue/devtools/build/hook.js:517:28
System.err: 
System.err: StackTrace: 
System.err:     Frame: function:'handleCopy', file:'file:///node_modules/@vue/devtools/build/hook.js:517:28
System.err:     Frame: function:'clone', file:'file:///node_modules/@vue/devtools/build/hook.js:637:11
System.err:     Frame: function:'', file:'file:///node_modules/@vue/devtools/build/hook.js:199:24
System.err:     Frame: function:'on', file:'file:///node_modules/@vue/devtools/build/hook.js:145:11
System.err:     Frame: function:'emit', file:'file:///node_modules/@vue/devtools/build/hook.js:179:17
System.err:     Frame: function:'devtoolPlugin', file:'file:///node_modules/vuex/dist/vuex.esm.js:54:14
System.err:     Frame: function:'Store', file:'file:///node_modules/vuex/dist/vuex.esm.js:356:4
System.err:     Frame: function:'./store.js', file:'file:///app/store.js:6:15
System.err:     Frame: function:'__webpack_require__', file:'file:///app/webpack/bootstrap:750:0
System.err:     Frame: function:'fn', file:'file:///app/webpack/bootstrap:120:0
System.err:     Frame: function:'', file:'file:///app/main.js:1:0
System.err:     Frame: function:'./main.js', file:'file:///data/data/com.moscommodo.peak/files/app/bundle.js', line: 339, column: 30
System.err:     Frame: function:'__webpack_require__', file:'file:///app/webpack/bootstrap:750:0
System.err:     Frame: function:'checkDeferredModules', file:'file:///app/webpack/bootstrap:43:0
System.err:     Frame: function:'webpackJsonpCallback', file:'file:///app/webpack/bootstrap:30:0
System.err:     Frame: function:'', file:'file:///data/data/com.moscommodo.peak/files/app/bundle.js', line: 2, column: 57
System.err:     Frame: function:'require', file:'', line: 1, column: 266
System.err: 
System.err: 
System.err: ReferenceError: HTMLElement is not defined
System.err:     at android.app.ActivityThread.handleBindApplication(ActivityThread.java:6465)
System.err:     at android.app.ActivityThread.access$1300(ActivityThread.java:219)
System.err:     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1859)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:107)
System.err:     at android.os.Looper.loop(Looper.java:214)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:7356)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:492)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:930)
System.err: Caused by: com.tns.NativeScriptException: Error calling module function 
System.err: ReferenceError: HTMLElement is not defined
System.err: File: "file:///node_modules/@vue/devtools/build/hook.js:517:28
System.err:
nativescript  nativescript-vue 
— Baron860
แหล่งที่มา

คำตอบ:

9

วิธีการแก้ปัญหาที่ @sidheart ชี้ให้เห็นผลงาน แต่จะไม่ยอมให้คุณสังเกตร้าน ข้อผิดพลาดจะถูกเรียกเพราะ NativeScript ไม่มี DOM HTMLElementและดังนั้นจึงไม่มีประเภทสำหรับ ทางออกชั่วคราวคือการเพิ่มบรรทัดด้านล่างไปยังวัตถุที่กำหนดโดยnew webpack.DefinePlugin({})ในไฟล์webpack.config.js:

HTMLElement: function() {
 return false;
},

ดังนั้นวัตถุทั้งหมดจะเป็นดังนี้:

new webpack.DefinePlugin({
  'global.TNS_WEBPACK': 'true',
  TNS_ENV: JSON.stringify(mode),
  process: 'global.process',
  HTMLElement: function() {
    return false;
  },
}),


ขอขอบคุณที่แบรนดอน Gohsman สำหรับการแสดงการแก้ปัญหานี้ในบทความของเขา

— belvederef
แหล่งที่มา
ขอบคุณสำหรับบทความ ค่อนข้างติดอยู่กับปัญหานี้!
— Rannie Ollit
17

ฉันพบวิธีแก้ไขอัปเดตmain.jsไฟล์ของคุณ

import store from './store' // <= this should be before VueDevtools 
import VueDevtools from 'nativescript-vue-devtools';
— sid heart
แหล่งที่มา
ขอบคุณสิ่งนี้ใช้ได้หลังจากอัปเดต tns-core-modules เป็น 6.2.0 และมีข้อผิดพลาดด้านบนโผล่ขึ้นมา
— Tadej Krevh
1
นี่ควรเป็นคำตอบที่ได้รับการอนุมัติ ขอบคุณ
— mojoblanco
ขอบคุณมันใช้ได้กับฉันด้วย
— ehabdevel
3

เมื่อคุณสร้างโครงการโดยใช้:

vue init nativescript-vue/vue-cli-template <project-name>

อย่าติดตั้ง vue-devtools ฉันคิดว่ามันเกี่ยวข้องกับ vue-devtools ที่พยายามเข้าถึง DOM ซึ่งไม่มีอยู่ใน Nativescript

— Sonificant
แหล่งที่มา
ฉันไม่รู้ว่าทำไมมันถึงทำงานร่วมกับ devtools ก่อนหน้านี้ .... แต่คุณพูดถูกแล้ว
— Baron860
สิ่งนี้แก้ไขให้ฉันเช่นกัน - ขอบคุณ
— MasterN8
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.