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.

Might be a silly question but is main.js in the src directory? Did you create the project with Vue CLI? — Phil
– Phil, Commented Feb 13, 2019 at 2:03
Yes it is in the src directory, and this project was created by someone else and I downloaded the repository, the project was created with Vue CLU, but not by me. — Gustavo Garrido
– Gustavo Garrido, Commented Feb 14, 2019 at 23:05

Nimantha · Accepted Answer · 2020-05-30 06:41:19Z

6

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'
   ]
 }
}

edited May 30, 2020 at 6:41

Nimantha

6,5376 gold badges32 silver badges78 bronze badges

answered May 30, 2020 at 5:06

Mihir Rane

711 silver badge5 bronze badges

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

Comments

Prosim · Accepted Answer · 2019-04-05 04:38:01Z

1

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.

answered Apr 5, 2019 at 4:38

Prosim

112 bronze badges

Comments

Sean Rasmussen · Accepted Answer · 2020-08-02 16:30:47Z

0

This is an old thread, but I ran across this recently after installing a new module to a Vue project. The problem went away when I updated all my other modules, too.

answered Aug 2, 2020 at 16:30

Sean Rasmussen

4536 silver badges15 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related