javascriptlaravelvue.jsvue-routerlaravel-7

Module not found: Error: Can't resolve | Vue Router

I am new to vue and laravel. I am trying to import my component but I am getting this error.

ERROR in ./resources/js/router.js Module not found: Error: Can't resolve './pages/frontend/HomepageComponent'

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomepageComponent from './pages/frontend/HomepageComponent'

Vue.use(VueRouter)

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

export default new VueRouter({
    routes
})

I searched everywhere but I am not being able to figure out how to solve this issue.

Please help me.

Solution

  • Try adding .vue to your import of the file

    import HomepageComponent from './pages/frontend/HomepageComponent'

    so it looks like:

    import HomepageComponent from './pages/frontend/HomepageComponent.vue'

    If I'm not wrong, the import will by default look for a .js file extension, so you have to be specific that you are looking for a .vue file.

    EDIT: Solution was unrelated to the answer above, the problem was a typo in the components file name.