HTMLElement को परिभाषित नहीं किया गया है - Nativecript-vue

10

मैं इस बिंदु पर करने की कोशिश कर रहा हूं कि परियोजना को चलाने के लिए मिल रहा है।

मै भागा tns run android

एप्लिकेशन बनाता है, लेकिन जैसे ही यह ऐप शुरू करता है और एक त्रुटि फेंकता है

संदर्भ: HTMLElement परिभाषित नहीं है

इसलिए यह सब तब शुरू हुआ जब मैं नए नेटिवस्क्रिप्ट थीम कोर (2.2.0) में लाने की कोशिश कर रहा था। मैंने उस गाइड का अनुसरण किया जो उन्होंने कई स्थानों पर पोस्ट की है। सब कुछ अच्छा लग रहा था। फिर मैं भागा tns run androidऔर HTMLElement को पहली बार परिभाषित त्रुटि नहीं मिली ।

  • मैंने नोड_मॉडल और प्लेटफ़ॉर्म फ़ोल्डर उड़ा दिए हैं
  • npm पुनर्निर्माण
  • tns स्थापित
  • मैंने nativescript-cli & cleared npm cache और फिर से इंस्टॉल किया है (जैसा कि यहां बताया गया है: https://discourse.nativescript.org/t/enoent-no-such-file-or-directory-project-pbbproproj/7336 )

फिर मैंने एक स्वच्छ परियोजना के साथ फिर से शुरू करने का फैसला किया। यहाँ दिए गए चरणों का पालन करें: https://nativescript-vue.org/en/docs/getting-started/quick-start/

और जब मैं दौड़ता tns run androidहूं, तब भी मुझे वही HTMLElement मिलता है, जिसे मैं बिल्कुल भी टेम्प्लेट में संशोधित नहीं किया गया था, तब भी त्रुटि को परिभाषित नहीं किया जाता है ।

मुझे नहीं पता कि यह एक बग है या अगर मैं कुछ गलत कर रहा हूं

tns --version 6.1.2

नोड -v 12.10.0

npm -v 6.10.3

इसलिए मुझे अब यह त्रुटि हो रही है चाहे मैं कुछ भी करूं ...

कोड वार जैसा कि मैंने कहा कि मुझे यह टेम्पलेट रेपो की साफ-सुथरी खींच के साथ मिल रही है: 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;
  },
}),


अपने लेख में इस समाधान को दिखाने के लिए ब्रैंडन गोहसमैन का धन्यवाद ।

— belvederef
स्रोत
लेख के लिए धन्यवाद। थोड़े इस समस्या के साथ अटक गया!
— Rannie Ollit
17

मुझे समाधान मिल गया, अपनी main.jsफ़ाइल को अपडेट करें

import store from './store' // <= this should be before VueDevtools 
import VueDevtools from 'nativescript-vue-devtools';
— दिल तोड़ो
स्रोत
धन्यवाद, यह tns- कोर-मॉड्यूल को 6.2.0 में अपडेट करने के बाद काम करता है और ऊपर त्रुटि पॉप अप हुआ।
— तडेज क्रेव
1
यह स्वीकृत उत्तर होना चाहिए। धन्यवाद
— mojoblanco
शुक्रिया मेरे साथ भी यह काम करता है।
— एहबदेवेल
3

जब आप किसी प्रोजेक्ट का उपयोग करते हैं:

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

Vue-devtools स्थापित न करें। मुझे लगता है कि इसके पास कुछ ऐसा है जो vue-devtools के साथ DOM को एक्सेस करने की कोशिश कर रहा है जो Nivescript में मौजूद नहीं है।

— Sonificant
स्रोत
मुझे नहीं पता कि इससे पहले भक्तों के साथ काम क्यों किया गया था .... लेकिन आप सही हैं कि मुद्दा था
— बैरन860
इसने मेरे लिए भी इसे ठीक किया - धन्यवाद
— मास्टर
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.