'does not provide an export named 'createRouter'' vue 3, vite and vue-router

Question

I just started using vite with vue.

When I'm trying to use vue-router I get the error:

SyntaxError: The requested module '/node_modules/.vite/vue-router/dist/vue-router.esm.js?v=4830dca4' does not provide an export named 'createRouter

My router/index.js looks like this:

import {
 createWebHistory,
 createRouter
} from "vue-router";

import Services from "../views/Services.vue";
import Customers from "../views/Customers.vue";

const history = createWebHistory();
const routes = [
  {
    path: "/",
    component: Services
  },
  {
    path: "/customers",
    component: Customers
  },
];
const router = createRouter({
  history,
  routes
});
export default router;

My main.js looks like this:

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router'

createApp(App).use(router).mount('#app')

My package.json looks like this:

{
 "name": "frontend",
 "version": "0.0.0",
 "scripts": {
 "dev": "vite",
 "build": "vite build"
},
 "dependencies": {
 "vue": "^3.0.5",
 "vue-router": "^3.4.9"
},
 "devDependencies": {
 "@vitejs/plugin-vue": "^1.0.4",
 "@vue/compiler-sfc": "^3.0.5",
 "autoprefixer": "^10.2.3",
 "postcss": "^8.2.4",
 "tailwindcss": "^2.0.2",
 "vite": "^2.0.0-beta.12"
 }
}

Anyone knows how to export the route?

Use import VueRouter from "vue-router" and when defining use const router = new VueRouter({ your code}) — Yash Maheshwari
– Yash Maheshwari, Commented Jan 23, 2021 at 12:00
no worries, you could get that when you see that he's using vite which works only with vue 3 — Boussadjra Brahim
– Boussadjra Brahim, Commented Jan 23, 2021 at 12:05

kubido · Accepted Answer · 2021-11-20 13:50:40Z

24

if you check inside the file '/node_modules/.vite/vue-router/dist/vue-router.esm.js?v=4830dca4'

there is no export default syntax. only named export {}

so instead import default, use named import.

// don't
import VueRouter from 'vue-router'

// do
import { createRouter, createWebHashHistory } from 'vue-router'

answered Nov 20, 2021 at 13:50

kubido

5686 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Anton Over a year ago

This is the answer if you're referencing: router.vuejs.org/guide/#javascript

Gustav Eriksson Over a year ago

I had this issue in App.vue and this answer solve my issue.

KSPR Over a year ago

This solves the issue but now it says VueRouter is not defined

Boussadjra Brahim · Accepted Answer · 2021-01-23 12:05:49Z

19

You should uninstall the current vue-router module and reinstall the latest (version 4) one which is compatible with Vue 3 by running :

npm uninstall vue-router

then

npm install vue-router@next -S

answered Jan 23, 2021 at 12:05

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

4 Comments

junchaw Over a year ago

The new portal: next.router.vuejs.org/installation.html

doğukan Over a year ago

4.0.6 worked fine for me with vue@^3.0.5

user9895412 Over a year ago

NOTE: If you're running Vite you'll have to shut it down and restart it before this change takes effect. This did solve my problem.

Sandesh Sapkota Over a year ago

@Roga do you mean quitting server and restarting again ?

Ian Callahan · Accepted Answer · 2021-02-26 12:19:24Z

4

For what it's worth I ran into this same issue while using vue-router@4. I was using yarn instead of npm. Switching to npm fixed the issue. I'm not sure if the problem was yarn or if a fresh install was all that was needed.

answered Feb 26, 2021 at 12:19

Ian Callahan

411 bronze badge

1 Comment

juanesarango Over a year ago

Me too. I have vue-router@4 and doing it with yarn. From your comment, I tried just deleting node_modules and reinstalling with yarn again and worked!

duXing · Accepted Answer · 2021-03-08 15:48:00Z

3

if you update vue-router from v3.x to v4.x under your vite project，plz clear the deps cache

vite --force

offical docs: https://vitejs.dev/guide/dep-pre-bundling.html#caching

answered Mar 8, 2021 at 15:48

duXing

1,4072 gold badges11 silver badges24 bronze badges

Comments

sein_digital · Accepted Answer · 2022-08-02 13:03:41Z

1

There is an easy solution if exported module actually exports only methods, but you still want to import all of them as an object.

// if this does not work
import VueRouter from 'vue-router'

// try this
import * as VueRouter from 'vue-router';

This usually happens when you import compiled JS into TS. Same solution works with underscore or lodash

answered Aug 2, 2022 at 13:03

sein_digital

192 bronze badges

Comments

Jignesh Joisar · Accepted Answer · 2022-10-13 21:29:50Z

1

Don't import like this in vue3 it will not work

import VueRouter from 'vue-router';

Import Like this it will work

import * as VueRouter from 'vue-router';

or Import Specific Then do like this

import { createRouter, createWebHashHistory } from 'vue-router'

answered Oct 13, 2022 at 21:29

Jignesh Joisar

15.4k6 gold badges69 silver badges61 bronze badges

Comments

mrtns · Accepted Answer · 2021-08-17 05:14:45Z

-2

Try to close your app than re open again, I fix this issue

answered Aug 17, 2021 at 5:14

mrtns

1

Collectives™ on Stack Overflow

'does not provide an export named 'createRouter'' vue 3, vite and vue-router

7 Answers 7

3 Comments

4 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

4 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related