33

I using webpack, after build and run in chrome show this error,I don't know how to solve it.

My code is very simple:

enter image description here

enter image description here

enter image description here

{
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-runtime": "5",
    "css-loader": "^0.26.1",
    "html-webpack-plugin": "^2.28.0",
    "vue-hot-reload-api": "^2.0.9",
    "vue-html-loader": "^1.2.3",
    "vue-loader": "10.0.3",
    "vue-style-loader": "^2.0.0",
    "vue-template-compiler": "^2.1.10",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  },
  "dependencies": {
    "vue": "^2.1.10"
  }
}
Saurabh
  • 71,488
  • 40
  • 181
  • 244
robincode
  • 570
  • 1
  • 5
  • 15
  • 1
    Try to import vue like this `import Vue from 'vue'` – Belmin Bedak Feb 20 '17 at 12:03
  • Check this tutorial for Vue v3 setup without vue-cli: https://frontendguruji.com/blog/how-to-setup-a-vue-js-project-from-scratch-without-vue-cli/ – Mandeep Pasbola Jan 02 '22 at 08:30
  • For my case I needed to include version of Vue in Url as it is now a requirement for your version in use. For example: https://cdn.jsdelivr.net/npm/vue@2.5.18/dist/vue.min.js – Elated Coder Mar 29 '22 at 15:49

5 Answers5

20

Vue is the default export from that library so you import like this.

import Vue from 'vue'
Austio
  • 5,939
  • 20
  • 34
  • @BelminBedak thank you, my original code is `import * as Vue from 'vue';` , I change it can work. – robincode Feb 20 '17 at 13:11
  • 12
    I import Vue like this but it still does not work. Any idea why? – Azimuth Jan 19 '18 at 12:26
  • it worked great, can you please why it didn't work as window.Vue = require('vue'); thank you! – salman ifrahim Jul 19 '21 at 11:15
  • 1
    @salmanifrahim At that point it would depend on your build process, require('vue') does not work in the browser and "SHOULD" be compiled to support both default and primary exports. If you add require("vue').default it might work, wowever, your best bet is to lean into the ESM import statement like above. – Austio Jul 19 '21 at 15:35
19

The issue is that Vue latest library has been updated, so we need to specify the version in the script tag

Please, replace the tag

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

By

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>

Ivneet Singh
  • 356
  • 2
  • 5
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 22 '22 at 20:44
  • Thank you, such a simple thing to miss. – bird2920 Oct 06 '22 at 15:08
13

You need to import the runtime only build. This comment in the Github issues explains.

Put this in your webpack.config.js.

resolve: {
  alias: {
    vue: 'vue/dist/vue.js'
  }
}
rb-
  • 2,315
  • 29
  • 41
11

I faced this problem while I was learning Vue. My tutorial was from Vue 2 and I was using Vue 3.

So I solved it by replacing

let app = new Vue({
  el: "#app",
  data: {
    message: "Hello Vue!",
  },
});

to this

const { createApp } = Vue;

createApp({
  data() {
    return {
      message: "Hello Vue!",
    };
  },
}).mount("#app");
Mohammad Edris Raufi
  • 1,393
  • 1
  • 13
  • 34
3

i just replace this file

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

to

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

in my code and the error ("Vue is not a constructor") is remove

Tehreem Amjad
  • 41
  • 3