HTMLElement tanımlanmamış - Nativescript-vue


10

Bu noktada yapmaya çalıştığım tek şey projeyi çalıştırmak.

koşarım tns run android

Uygulama oluşturulur, ancak uygulamayı başlatır ve bir hata atar

ReferenceError: HTMLElement tanımlanmamış

Tüm bunlar yeni ana tema tema çekirdeğini (2.2.0) getirmeye çalıştığımda başladı. Birkaç yerde yayınladıkları kılavuzu takip ettim. Her şey güzel görünüyordu. Sonra koştumtns run android ve HTMLElement ilk kez tanımlı değil hatası var .

Sonra tekrar başlamaya karar verdim ve temiz bir projeye başladım. Buradaki adımları takip ederek: https://nativescript-vue.org/en/docs/getting-started/quick-start/

Ve çalıştırdığımda tns run androidhala aynı HTMLElement tanımlı değil olsun hatası alıyorum, şablonu hiç değiştirmediğimde bile.

Bunun bir hata olup olmadığını veya korkunç bir şekilde yanlış bir şey yapıp yapmadığımı bilmiyorum

tns - sürüm 6.1.2

düğüm -v 12.10.0

npm -v 6.10.3

Şimdi ne yaparsam yapayım şimdi bu hatayı alıyorum ...

Bu şablon repo temiz bir çekme ile bu hatayı alıyorum dediğim gibi akıllıca kod: https://github.com/nativescript-vue/vue-cli-template

İşte Stack.

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: 

Yanıtlar:


9

Sidheart'ın işaret ettiği çözüm işe yarıyor, ancak mağazayı gözlemlemenize izin vermiyor. NativeScript'in bir DOM'si olmadığı ve bu nedenle hiçbir türü olmadığı için hata tetiklenir HTMLElement. Geçici bir çözüm, new webpack.DefinePlugin({})dosyada tarafından tanımlanan nesneye aşağıdaki satırı eklemektir webpack.config.js:

HTMLElement: function() {
 return false;
},

böylece tüm nesne şöyle görünür:

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


Brandon Gohsman'a bu çözümü makalesinde gösterdiği için teşekkürler .


makale için teşekkürler. biraz bu sorunla sıkışmış!
Rannie Ollit

17

Çözümü buldum, main.jsdosyanızı güncelleyin

import store from './store' // <= this should be before VueDevtools 
import VueDevtools from 'nativescript-vue-devtools';

Teşekkürler, bu tns-core-modülleri 6.2.0'a güncellendikten sonra çalıştı ve yukarıdaki hata ortaya çıktı.
Tadej Krevh

1
Bu onaylanmış cevap olmalıdır. Thanks
mojoblanco

Teşekkürler, bu benimle de çalışıyor.
ehabdevel

3

Şunları kullanarak bir proje oluşturduğunuzda:

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

Vue-devtools yüklemeyin. Ben Nativecript'te mevcut olmayan DOM erişmeye çalışan vue-devtools ile ilgisi olduğunu düşünüyorum.


Neden daha önce devtools ile çalıştı bilmiyorum .... Ama haklısın, sorun
buydu

Bu benim için de sabit - teşekkürler
MasterN8
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.