Javascript - Why the error runs - Uncaught SyntaxError: The requested module '/src/router/index.js' does not provide an export named 'default' at main.js vue?

Bob
May 21, 2023
298 views
0 votes
2 Answers

At vite vue runs the error – Why the error runs – Uncaught SyntaxError: The requested module ‘/src/router/index.js’ does not provide an export named ‘default’ at main.js vue ? What is wrong ?

https://stackblitz.com/edit/vue3-vite-starter-ywq59j?file=package.json,src%2Fcomponents%2FFooter.vue,src%2Fcomponents%2FHeader.vue,src%2Fcomponents%2FMain.vue,src%2Fcomponents%2FNotMain.vue,src%2Fviews%2FHome.vue,src%2Fviews%2FShops.vue,src%2FApp.vue,src%2Fmain.js,public%2Ffavicon.ico

    // main.js

    import { createApp } from 'vue'
    import 'bootstrap/dist/css/bootstrap.css'
    import 'bootstrap/dist/js/bootstrap.js'
    import App from './App.vue'
    import router from './router'

    const app = createApp(App)

    app.use(router)

    app.mount('#app')

// router index.js

import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import Shops from '../views/Shops.vue';
const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/shops',
      name: 'Shops',
      component: Shops,
    },
  ],
});

export default router;

Answers

- SubhadipDasGupta
- May 21, 2023 at 7:02 pm
- 0 votes
0
Can you please share /src/router/index.js code? What I can see in the code you have shared via stackblitz is index.js inside router folder is empty.

Please add an export inside router/index.js, for example refer below
```
export default expression;
export default function functionName() { /* … */ }
export default class ClassName { /* … */ }
export default function* generatorFunctionName() { /* … */ }
export default function () { /* … */ }
export default class { /* … */ }
export default function* () { /* … */ }
```
These are all types of export default you can use..
Please refer MDN Docs to know more about how to use export
https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

Edit Solution :
import * as VueRouter from 'vue-router';
Update this in router/index.js and it should work. This error occurs because vue-router has a named export instead of a default export
Login or Signup to reply.

- NatenaelHaylemariam
- May 21, 2023 at 9:09 pm
- 0 votes
0
you must declare the router in the following manner and export from the router file (src/router/index.js).
```
import { createRouter, createWebHistory } from "vue-router";
const routers={
{path:'/',name:'NameOfTheComponent',component:()=>import('pathof the component')
}

const router=createRouter({history:createWebHistory(),routers});
export default router;
```
as you see the last line is exporting the defined router file to the the component that you want to import and use it as a router.
Login or Signup to reply.