The Coding Couple

Pair programming is a lifetime commitment.

Vue.JS Error: This relative module was not found

by

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

This relative module was not found error message

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.

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!