web-dev-qa-db-fra.com

HTMLElement n'est pas défini - Nativescript-vue

Tout ce que j'essaie de faire à ce stade, c'est de lancer le projet.

Je cours tns run Android

L'application se construit, mais lorsqu'elle démarre l'application et génère une erreur

ReferenceError: HTMLElement n'est pas défini

Donc, tout a commencé lorsque j'essayais d'apporter le nouveau noyau de thème nativescript (2.2.0). J'ai suivi le guide qu'ils ont posté à plusieurs endroits. Tout avait l'air bien. Puis j'ai couru tns run Android et a obtenu pour la première fois l'erreur HTMLElement n'est pas défini.

J'ai alors décidé de recommencer et de commencer avec un projet propre. Suivez les étapes ici: https://nativescript-vue.org/en/docs/getting-started/quick-start/

Et quand je lance tns run Android J'obtiens toujours la même chose HTMLElement n'est pas défini erreur, même si je n'ai pas modifié le modèle à tout.

Je ne sais pas si c'est un bug ou si je fais quelque chose d'horriblement mal

tns --version 6.1.2

noeud -v 12.10.0

npm -v 6.10.3

Donc, je reçois maintenant cette erreur, peu importe ce que je fais maintenant ...

En ce qui concerne le code, comme je l'ai dit, j'obtiens cette erreur avec une traction nette de ce dépôt de modèle: https://github.com/nativescript-vue/vue-cli-template

Voici la pile.

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:
nativescriptnativescript-vue
10
Baron860

La solution que @sidheart a indiquée fonctionne, mais elle ne vous permettra pas d'observer le magasin. L'erreur est déclenchée car NativeScript n'a pas de DOM et n'a donc pas de types pour HTMLElement. Une solution temporaire consiste à ajouter la ligne ci-dessous à l'objet défini par new webpack.DefinePlugin({}) dans le fichier webpack.config.js:

HTMLElement: function() {
 return false;
},

de sorte que l'objet complet ressemble à ceci:

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


Merci à Brandon Gohsman d'avoir montré cette solution dans son article .

8
belvederef

J'ai trouvé la solution, mettez à jour votre main.js fichier

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

Lorsque vous créez un projet en utilisant:

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

N'installez pas vue-devtools. Je pense que cela a quelque chose à voir avec vue-devtools essayant d'accéder au DOM qui n'existe pas dans Nativescript.

4
Sonificant