VueJS Module not found error while importing the components

Question

I have an app where I load component using <router-view/>!

I am getting the problem in importing the component in router.js. It always gives me the following error:

These relative modules were not found:

* ./components/Poetry.vue in ./src/router/routes.js
* ./components/PoetryDetails/PoetryCard.vue in ./src/router/routes.js
* ./components/PoetryDetails/Search.vue in ./src/router/routes.js

I have the folder structure like this:

├── _components
|   ├── _PoetryDetails
|   |   └──PoetryCard.vue
|   |   └──Search.vue
|   └── Poetry.vue
├── _router
|   ├── index.js (routes.js is imported in this file)
|   └── routes.js
├── App.vue
└── main.js

In routes.js, I am importing the components as follows:

import Poetry from './components/Poetry.vue'
import PoetryCard from './components/PoetryDetails/PoetryCard.vue'
import PoetrySearch from './components/PoetryDetails/Search.vue'

export const routes = [
    { path: '', name: 'poetrysearch', component: Poetry, children: [
        { path: 'poetry', name: 'poetrycard', component: PoetryCard },
        { path: 'poetry/search', name: 'poetrysearch', component: PoetrySearch },
    ]},
]

But, I am still getting the damn error. Please help.

ittus · Accepted Answer · 2018-07-12 02:47:24Z

8

You're using relative path. In your routes.js, it should be

import Poetry from '../components/Poetry.vue'
import PoetryCard from '../components/PoetryDetails/PoetryCard.vue'
import PoetrySearch from '../components/PoetryDetails/Search.vue'

.. notation means go to parent folder.

If you're using webpack, you can add alias:

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      ...
      '@': resolve('src'), // your source folder
    }
  }

and then you can import:

import Poetry from '@/components/Poetry.vue'
import PoetryCard from '@/components/PoetryDetails/PoetryCard.vue'
import PoetrySearch from '@/components/PoetryDetails/Search.vue'

answered Jul 12, 2018 at 2:47

ittus

22.5k5 gold badges62 silver badges59 bronze badges

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

3 Comments

Axel Over a year ago

Thanks for the answer but I am still getting this error:

* ../main in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/PoetryDetails/Search.vue, ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/PoetryDetails/PoetryCard.vue

Axel Over a year ago

Actually, these components were first in /components and then I created a new folder and moved these components(PoetryCard.vue and Search.vue) in that folder. And since then, I am getting this annoying error.

Axel Over a year ago

Found the error. Actually, I did some import in those files too so I needed to make changes there too and thanks for that @!

Collectives™ on Stack Overflow

VueJS Module not found error while importing the components

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related