vite The requested module vue-router?

Question

package.json:

{
  "name": "blog",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "dev": "vite --config ./vite.myconfig.js",
    "build": "vue-tsc --noEmit && vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "@types/node": "^14.14.37",
    "vue": "^3.0.5",
    "vue-router": "^4.0.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.2.1",
    "@vue/compiler-sfc": "^3.0.5",
    "typescript": "^4.2.3",
    "vite": "^2.1.5",
    "vue-tsc": "^0.0.15"
  }
}

vite.myconfig.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

/**
 * @type {import('vite').UserConfig}
 */
module.exports = {
  type: 'module',
  plugins: [vue()],
  resolve: {
    alias: {
      '@src': path.resolve(__dirname, './src'),
      '@assets': path.resolve(__dirname, './assets'),
    },
  },
  minify: 'terser',
}

my router script

import vueRouter from 'vue-router'

const routes = [
  { path: '/home', component: {} },
  { path: '/about', component: {} },
]

const router = vueRouter.createRouter({
  history: vueRouter.createWebHistory(),
  routes: routes,
})
export default router

this Error:

router.ts:1 Uncaught SyntaxError: The requested module '/node_modules/.vite/vue-router.js?v=096e59a1' does not provide an export named 'default'

this why?

Answer 1

The right syntax is import * as vueRouter from 'vue-router'; because the vue router doesn't provide default export:

import * as vueRouter from 'vue-router';

const routes = [
  { path: '/home', component: {} },
  { path: '/about', component: {} },
];

const router = vueRouter.createRouter({
  history: vueRouter.createWebHistory(),
  routes: routes,
});
export default router;

or

import {createRouter} from 'vue-router';

const routes = [
  { path: '/home', component: {} },
  { path: '/about', component: {} },
];

const router = createRouter({
  history: vueRouter.createWebHistory(),
  routes: routes,
});
export default router;