How to fix "This relative module was not found: * ./src/main.js in multi..." error when trying to npm run serve

Question

When trying to run the application with npm run serve (on iOS), I am getting the following error:

This relative module was not found:

• ./src/main.js in multi (webpack)-dev-server/client?http://10.0.0.5:8081/sockjs-node ./node_modules/@vue/cli-service/node_modules/webpack/hot/dev-server.js ./src/main.js

Please bear with me, I am new to this.

I have tried a bunch of random stuff like checking for misspelling issues, reinstalling webpack, updating node, and nothing. I have no clue of what this error is about so I am not sure where to look at.

The main.js file looks like this:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/store'
import './registerServiceWorker'
import * as VueGoogleMaps from "vue2-google-maps"
import VeeValidate from 'vee-validate'
import BootstrapVue from 'bootstrap-vue'

Vue.use(VueGoogleMaps, {
    load: {
        key: "AIzaSyCGiy39IZbj8oxvO4HHqSVjP5RmLSHl7mY",
        libraries: "places" // necessary for places input
    }
});

Vue.use(VeeValidate);
Vue.use(BootstrapVue);

Vue.config.productionTip = false;

new Vue({
    router,
    store,
    beforeCreate() {
        this.$store.commit('initialiseStore');
        this.$store.dispatch('commons/initialize');
    },
    render: h => h(App)
}).$mount('#app')

I expect the live web server to display, but I am getting this compilation error and it is failing.

Answer 1

I faced a similar issue after and spent hours searching.

The issue occurred in my project when I tried to install vuetify using command vue add vuetify. Apparently, the in automatically changes the app entry property in webpack.config automatically.

You can either change the filename itself to main.js or change the webpack config through vue.config.js (by reading the vue cli documentation regararding webpack config).

You can check your webpack.config by using the command vue inspect.

 ],
 entry: {
   app: [
    './src/main.js'
   ]
 }
}

Answer 2

I had a similar error, this worked for me but not sure you have the same issue. I found this in one of my webpack configuration files (usually named like webpack.dev.conf.js):

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [
    resolve('src'), 
    resolve('test'), 
    resolve('node_modules/webpack-dev-server/client')
  ]
},

I removed resolve('node_modules/webpack-dev-server/client') and it fixed that issue.