I am moving to a workflow using WebPack, which bundles code. While transitioning, I stumbled across this error:

Uncaught ReferenceError: Vue is not defined

at eval (external “Vue”?548a:1)

at Object.<anonymous> (pcp_mainbundle.js:172)

at __webpack_require__ (pcp_mainbundle.js:20)

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

at Object.<anonymous> (pcp_mainbundle.js:196)

at __webpack_require__ (pcp_mainbundle.js:20)

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

at Object.<anonymous> (pcp_mainbundle.js:189)

at __webpack_require__ (pcp_mainbundle.js:20)

at Object.<anonymous> (pcp_mainbundle.js:181)

10000000111a2334:47 Uncaught TypeError: window.pcpRun is not a function

at 10000000111a2334:47

I ensured that the vue package is installed from npm:

npm install vue –save

(these are two dashes before save).

Then I imported it like this:

import Vue from ‘vue’;

as I was used to with other imports, and indeed as I have seen it in a very good Udemy course by Maximilian Schwarzmüller.

The reason it does not work is probably because this Udemy course is set up by vue-cli, which sets up package.json.

I did this manually / chose a different path.

In effect I suspect that ‘vue’ is being redefined there, to vue/dist/vue.esm.js

I got the hint here: Webpack Intro into Vue.js

resolve: { alias: { // Ensure the right Vue build is used ‘vue$’: ‘vue/dist/vue.esm.js’ } }

Therefore I could possibly update my webpack.config.js.

I chose to simply put it into my import, as this Forum thread suggests:

import Vue from ‘vue/dist/vue.esm.js’;

This now works for me, the error Uncaught ReferenceError: Vue is not defined is gone.

Update 2.3.2020 (solution): externals

As mentioned, I was transitioning from manual script tag includes to a webpack process. Previously, therefore, I had included Vue using a script tag.

In order for this to work, and Vue not being loaded TWICE, I had applied the following workaround in webpack.config.js:

externals: {

vue: ‘Vue’

},

这段感觉并没有起作用

this lead to webpack NOT including vue –> whenever it was included, webpack assumed that I would provide it externally, which I did not do.

The solution is, therefore, to remove this externals section from webpack.config.js