Vue.JS Error: This relative module was not found

I was making an update to a small Vue.JS side project when I encountered a build error:

ERROR Failed to compile with 1 errors 6:00:20 AM

This relative module was not found:

* ./components/ProficiencyBar.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/SkillSection.vue?vue&type=script&lang=js&

My most recent change was a refactor that involved the creation of a new component: ProficiencyBar . At first I thought, Oh I must have typoed the component name . But once I verified all my spelling was correct, I was stumped. A few Google searches later I came across a GitHub issue describing the same issue as mine . The solution? Delete the /node_modules/.cache folder.

Unfortunately, deleting the folder didn’t solve the error, but it led me to the another potential solution to my problem. I looked at Vue component linked in the GitHub issue and noticed a section missing from mine: the components . In my refactor I forgot to add the ProficiencyBar to the SkillSection components.

import ProficiencyBar from './components/ProficiencyBar.vue'; export default { name: 'SkillSection', props: ['skills'], components: { ProficiencyBar

However, to my shock and disappointment, that glaring omission still didn’t resolve my original error.

Another Google search later, I found another GitHub issue with the same error . The solution there: changing the import style. In their case it went from using the @ symbol to dot notation for relative path. Since I was already using the dot notation, I decided to give the @ symbol a try and it worked!

import ProficiencyBar from '@/components/ProficiencyBar.vue';

Now the question is why? Unfortunately, I’ll have to answer that another day.

Let’s be friends!

• Instagram: @thecodingcouple
• Twitter: @thecodingcouple
• GitHub: @thecodingcouple