{"id":20495,"date":"2020-02-27T10:24:07","date_gmt":"2020-02-27T09:24:07","guid":{"rendered":"https:\/\/pi3g.com\/?p=20495"},"modified":"2020-03-02T08:46:22","modified_gmt":"2020-03-02T07:46:22","slug":"fixing-uncaught-referenceerror-vue-is-not-defined-with-webpack","status":"publish","type":"post","link":"https:\/\/pi3g.com\/de\/fixing-uncaught-referenceerror-vue-is-not-defined-with-webpack\/","title":{"rendered":"Behebung von Uncaught ReferenceError: Vue ist nicht mit Webpack definiert"},"content":{"rendered":"

Ich bin zu einem Workflow mit WebPack, die Code b\u00fcndelt bewegen. W\u00e4hrend der Umstellung bin ich \u00fcber diesen Fehler gestolpert:<\/p>\n

\n

Ungefangener ReferenceError: Vue ist nicht definiert<\/p>\n

bei eval (externes \"Vue\"?548a:1)<\/p>\n

at Object. (pcp_mainbundle.js:172)<\/p>\n

at __webpack_require__ (pcp_mainbundle.js:20)<\/p>\n

bei eval (pcpVue.js?6cb8:1)<\/p>\n

at Object. (pcp_mainbundle.js:196)<\/p>\n

at __webpack_require__ (pcp_mainbundle.js:20)<\/p>\n

bei eval (pcpMain.js?814e:1)<\/p>\n

at Object. (pcp_mainbundle.js:189)<\/p>\n

at __webpack_require__ (pcp_mainbundle.js:20)<\/p>\n

at Object. (pcp_mainbundle.js:181)<\/p>\n

10000000111a2334:47 Ungefangener TypeError: window.pcpRun ist keine Funktion<\/p>\n

um 10000000111a2334:47<\/p>\n<\/blockquote>\n

Ich habe sichergestellt, dass das Vue-Paket von npm installiert ist:<\/p>\n

\n

npm install vue -save<\/p>\n<\/blockquote>\n

(das sind zwei Bindestriche vor dem Speichern).<\/p>\n

Dann habe ich es wie folgt importiert:<\/p>\n

\n

import Vue from 'vue';<\/p>\n<\/blockquote>\n

wie ich es von anderen Einfuhren gewohnt war, und wie ich es auch in einem sehr guter Udemy-Kurs von Maximilian Schwarzm\u00fcller<\/a>.<\/p>\n

Der Grund, warum es nicht funktioniert, ist wahrscheinlich, dass dieser Udemy-Kurs von vue-cli eingerichtet wird, das package.json einrichtet.<\/strike><\/p>\n

Ich habe das manuell gemacht \/ einen anderen Weg gew\u00e4hlt.<\/strike><\/p>\n

Tats\u00e4chlich vermute ich, dass \"vue\" dort neu definiert wird, und zwar in vue\/dist\/vue.esm.js<\/strike><\/p>\n

Ich habe den Hinweis hier verstanden: <\/strike>Webpack-Einf\u00fchrung in Vue.js<\/strike><\/a><\/p>\n

\n

aufl\u00f6sen: { alias: { \/\/ Sicherstellen, dass der richtige Vue-Build verwendet wird 'vue$': 'vue\/dist\/vue.esm.js' } }<\/strike><\/p>\n<\/blockquote>\n

Daher k\u00f6nnte ich m\u00f6glicherweise meine webpack.config.js aktualisieren. <\/strike><\/p>\n

Ich habe mich daf\u00fcr entschieden, es einfach in meinen Import aufzunehmen, da dies <\/strike>Forum-Thema<\/strike><\/a> schl\u00e4gt vor:<\/strike><\/p>\n

\n

importiere Vue aus 'vue\/dist\/vue.esm.js';<\/strike><\/p>\n<\/blockquote>\n

Dies funktioniert jetzt bei mir, der Fehler Ungefangener ReferenceError: Vue ist nicht definiert<\/strong> ist weg.<\/strike><\/p>\n

Update 2.3.2020 (L\u00f6sung): Externals<\/h1>\n

Wie bereits erw\u00e4hnt, war ich dabei, von manuellen Skript-Tag-Einbindungen zu einem Webpack-Prozess \u00fcberzugehen. Zuvor hatte ich daher Vue mit einem Skript-Tag eingebunden.<\/p>\n

Damit dies funktioniert und Vue nicht ZWEIMAL geladen wird, hatte ich den folgenden Workaround in webpack.config.js angewendet:<\/p>\n

\n

Externals: {<\/p>\n

vue: 'Vue'<\/p>\n

},<\/p>\n<\/blockquote>\n

Dies f\u00fchrte dazu, dass Webpack Vue NICHT einschloss -> wann immer es eingeschlossen wurde, nahm Webpack an, dass ich es extern bereitstellen w\u00fcrde, was ich nicht tat.<\/p>\n

Die L\u00f6sung besteht daher darin, den Abschnitt \"Externals\" aus webpack.config.js<\/strong><\/p>","protected":false},"excerpt":{"rendered":"

Ich bin zu einem Workflow mit WebPack, die Code b\u00fcndelt bewegen. W\u00e4hrend der Umstellung bin ich \u00fcber diesen Fehler gestolpert: Uncaught ReferenceError: Vue ist nicht definiert at eval (external \"Vue\"?548a:1) at Object. (pcp_mainbundle.js:172) at __webpack_require__ (pcp_mainbundle.js:20) at eval (pcpVue.js?6cb8:1) at Object. (pcp_mainbundle.js:196) at __webpack_require__ (pcp_mainbundle.js:20) at eval (pcpMain.js?814e:1) at Object. (pcp_mainbundle.js:189) at __webpack_require__ (pcp_mainbundle.js:20) at Object. (pcp_mainbundle.js:181)...<\/p>","protected":false},"author":830,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[666],"tags":[734,733,732,667,675,731],"class_list":["post-20495","post","type-post","status-publish","format-standard","hentry","category-vue-js","tag-chrome","tag-eval","tag-referenceerror","tag-vue","tag-vue-js","tag-webpack"],"_links":{"self":[{"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/posts\/20495","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/users\/830"}],"replies":[{"embeddable":true,"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/comments?post=20495"}],"version-history":[{"count":2,"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/posts\/20495\/revisions"}],"predecessor-version":[{"id":20873,"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/posts\/20495\/revisions\/20873"}],"wp:attachment":[{"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/media?parent=20495"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/categories?post=20495"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/tags?post=20495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}