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

10

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'introduire 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. Ensuite, j'ai couru tns run androidet j'ai obtenu l' erreur HTMLElement n'est pas définie pour la première fois.

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 lorsque je lance, tns run androidje reçois toujours le même HTMLElement n'est pas une erreur définie , même lorsque je n'ai pas modifié le modèle du 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:
nativescript  nativescript-vue 
— Baron860
source

Réponses:

9

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 .

— belvederef
source
merci pour l'article. un peu coincé avec ce problème!
— Rannie Ollit
17

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

import store from './store' // <= this should be before VueDevtools 
import VueDevtools from 'nativescript-vue-devtools';
— Sid coeur
source
Merci, cela a fonctionné après la mise à jour de tns-core-modules vers 6.2.0 et une erreur au-dessus.
— Tadej Krevh
1
Ce devrait être la réponse approuvée. Merci
— mojoblanco
Merci cela fonctionne aussi avec moi.
— ehabdevel
3

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.

— Sonificant
source
Je ne sais pas pourquoi cela fonctionnait avec devtools avant ... Mais vous avez raison, c'était le problème
— Baron860
cela a également été corrigé pour moi - merci
— MasterN8
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.