22

I'm developing app using JS and Vue.js and get error on line:

import Vue from 'vue'

I'm getting this:

Uncaught SyntaxError: The requested module '/node_modules/.vite/vue.js?v=6dba2ea6' does not provide an export named 'default'

I googled that might be caused by old Vue version, in my package.json vue version is 3.2.6, but

npm view vue version

returns 2.6.14, I tried to upgrade it with Vue CLI

vue upgrade

but npm command still return 2.6.14

I hope you could help me, what did I wrong or it is not even versions problem? Thanks!

Zixel
  • 251
  • 1
  • 2
  • 7

4 Answers4

12

The reason it didn't work is that Vue provides a named export, whereas you are trying to import it as though it had a default export.

To make a named import (which you must do with named exports), you need to wrap the name of the export you want to import in curly braces, so {} around Vue like this:

import { Vue } from 'vue';
      // ^^^ name of export

It will work

The thing you want to do is import vue but it doesnot have a default export function or either the default thing to export is not set in vue module. So you have to select function named vue by adding curly braces.

If it had a default export function, then your code would have worked and in that case you could write anything in place of vue like below:

import anyname from 'vue'

anyname is name whatever you want.

connexo
  • 53,704
  • 14
  • 91
  • 128
jass
  • 159
  • 6
  • 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 Dec 25 '21 at 05:37
4

This worked for me:-

import * as Vue from 'vue';

and similarly for different packages:-

import * as Vuex from 'vuex';
import * as VueRouter from 'vue-router';

As of time of writing:-

"devDependencies": {
       ...
        "vue": "^3.2.45",
cookie
  • 2,546
  • 7
  • 29
  • 55
2

Usually as of Vue 2, in the src/main.js file, we’re bootstrapping the app by calling a new Vue as a constructor for creating an application instance.

import Vue from "vue";
import App from "./App.vue";
import router from './router'

const app = new Vue({
  router,
  render: h => h(App)
});

For Vue 3 the initialization code syntax has changed and is much cleaner and compact

import { createApp } from "vue";

createApp(App).use(store).mount('#app')
Kibiku Brian
  • 221
  • 2
  • 11
0

Another solution is to use the createApp() function like this:

import { createApp } from 'vue';
createApp(App).mount('#app')

I'm not experienced in Vue.js, but it looks like they no longer export a single object. Rather, a collection of things.

fooquency
  • 1,575
  • 3
  • 16
  • 29
Sthe
  • 2,575
  • 2
  • 31
  • 48