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

by

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.

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

0👍

I think you forget to put

export default router;

At the end of the router code.

Leave a comment