Correzione di Uncaught ReferenceError: Vue non è definito con webpack

Sto passando a un flusso di lavoro utilizzando WebPack, che raggruppa il codice. Durante la transizione, mi sono imbattuto in questo errore:

Uncaught ReferenceError: Vue non è definito

at eval (external "Vue"?548a:1)

at Object. (pcp_mainbundle.js:172)

in __webpack_require__ (pcp_mainbundle.js:20)

at eval (pcpVue.js?6cb8:1)

at Object. (pcp_mainbundle.js:196)

in __webpack_require__ (pcp_mainbundle.js:20)

a eval (pcpMain.js?814e:1)

at Object. (pcp_mainbundle.js:189)

in __webpack_require__ (pcp_mainbundle.js:20)

at Object. (pcp_mainbundle.js:181)

10000000111a2334:47 Uncaught TypeError: window.pcpRun non è una funzione

a 10000000111a2334:47

Mi sono assicurato che il pacchetto vue sia installato da npm:

npm install vue -save

(sono due trattini prima di salvare).

Poi l'ho importato in questo modo:

importa Vue da 'vue';

come ero abituato con altre importazioni, e in effetti come l'ho visto in un ottimo corso Udemy di Maximilian Schwarzmüller.

Il motivo per cui non funziona è probabilmente perché questo corso Udemy è impostato da vue-cli, che imposta package.json.

L'ho fatto manualmente / ho scelto un percorso diverso.

In effetti sospetto che 'vue' sia stato ridefinito lì, a vue/dist/vue.esm.js

Ho capito l'antifona qui: Introduzione a Webpack in Vue.js

risolvere: { alias: { // Assicurati che venga usata la giusta build di Vue 'vue$': 'vue/dist/vue.esm.js' } }

Quindi potrei eventualmente aggiornare il mio webpack.config.js.

Ho scelto di metterlo semplicemente nella mia importazione, come questo Filo conduttore del forum suggerisce:

importa Vue da 'vue/dist/vue.esm.js';

Questo ora funziona per me, l'errore Uncaught ReferenceError: Vue non è definito non c'è più.

Aggiornamento 2.3.2020 (soluzione): esterni

Come accennato, stavo passando dall'inclusione manuale di tag di script a un processo webpack. In precedenza, quindi, avevo incluso Vue usando un tag script.

Affinché questo funzioni, e Vue non venga caricato DUE VOLTE, ho applicato il seguente workaround in webpack.config.js:

esterni: {

vue: 'Vue'

},

questo ha portato webpack a NON includere vue -> ogni volta che veniva incluso, webpack presumeva che l'avrei fornito esternamente, cosa che non ho fatto.

La soluzione è quindi quella di rimuovere questa sezione externals da webpack.config.js