Vue-cli: These relative modules were not found:

[williamstar]

when runing dev-server there throw these two Error

ERROR Failed to compile with 2 errors 10:53:28

These relative modules were not found:

• ./build/dev-client in multi ./build/dev-client ./src/main.js
• ./src/main.js in multi ./build/dev-client ./src/main.js
  > Listening at http://localhost:8080

node-version 6.8.0
window10
i don't modify the webpack default config, it can run the app sometime but mostly throw the error

[fluteweng]

I got the same problem like this:
ERROR Failed to compile with 1 errors
This relative module was not found:

• ./src/main.js in multi ./build/dev-client ./src/main.js

[xerosanyam]

@williamstar how did u solve it ?

[williamstar]

@xerosanyam In my case , I use the vscode and run the app by F5 at the dev-server or node dev-server.js because I want to debugg some detail. But you can run npm run dev to solve this problem, if you want to debugger code may be can use the chrome debugger symbol embed into code.

[Leomund]

Same problem. I have full-stack application with express and default vue-webpack-boilerplate. When I run $ node client/build/dev-server.js i receive this error:

ERROR  Failed to compile with 2 errors

These relative modules were not found:

* ./build/dev-client in multi ./build/dev-client ./src/main.js
* ./src/main.js in multi ./build/dev-client ./src/main.js

but when I trying to run it from client folder it works properly.

$ cd client 
$ node build/dev-server.js

any suggestions?

[10thfloor]

Was this solved? If so can someone post the solution?

[AprilTong]

请问有人解决了这个问题吗
才安装的vue cli利用其搭建项目npm run dev之后就报类似的错

[xerosanyam]

Can someone please post the solution ?

[xerosanyam]

I solved it by updating all the npm packages by:

npm i -g npm-check-updates
npm-check-updates -u
npm install

please commit your package.json before performing above operation

[Huangsrtext]

can someone solve this problem?

[xerosanyam]

The solution I have suggested above doesnt work for you ?

[luickk]

@xerosanyam Doesnt work );

[Huangsrtext]

@xerosanyam The second input is invalid

[Huangsrtext]

@Tzrong 你的问题解决了吗

[luickk]

你会说英语吗？

[Huangsrtext]

@MrGrimod 你是说我？

[luickk]

是的，但谷歌翻译器确实可以中国。因此，不要在意。
对不起。

[Huangsrtext]

@MrGrimod 哈哈 没事 大家能指出问题所在就好

[Xuhengfeng]

These relative modules were not found:
同样的问题大家是怎么解决的?

[Huangsrtext]

@Xuhengfeng 我也一直没找到方法，一直在等

[Huangsrtext]

This relative module was not found:

• ./src/main.js in multi ./build/dev-client ./src/main.js

[paulredmond]

I got this error when I messed up the case of the filename. When I ran this on a build server running Linux (I use Mac for development) it failed because OS X is case-insensitive and Debian is case-sensitive.

[andrey-helldar]

I'm solved by next commands:

npm i -g npm-check-updates
npm-check-updates -u
npm install --no-bin-links
npm update
npm run dev

[hfq-lixiangyang]

i have same problem, but I'm solved by next commands
npm install babel-loader

[rtugeek]

This may cause by project inited in an existing vue-cli project, I dig myself into a hole, lol.
So I remove the project directory and re-create it, everything is working fine!.

[javidrashid]

If you haven't messed up with your webpack config, it is most likely that you have an issue with one of the npm packages. Clean/Verify the npm cache and then run the below commands, thats how I solved this.

npm i -g npm-check-updates
npm-check-updates -u
npm install

[iamdebabrataghosh]

Check the path you are using.

[charlie043]

I'm solved by re-install all modules :)

rm -rf node_modules
npm install

[egno]

1. Check vue-* modules in devDependencies part of your package.json file.
2. Then upgrade your vue-* modules. Example:
   npm i --upgrade --save-dev vue-style-loader
3. Enjoy!

[Dried09]

I have very similar problem. When I do "npm run serve" or "npm run build" I get this on console:

ERROR Failed to compile with 1 errors
This relative module was not found:
*./app.vue in ./src/main.ts

None of solutions suggested above has no any effect.
I alredy tried to checkout previous project commits, update global and local packages, clone and build project on other machines, delete and reinstall packages, delete package-lock.json, create new project via vue cli and add project files on new configuration - and nothing was changed.

Here is my main.ts

import Vue from 'vue';
import App from './app.vue';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App)
}).$mount('#app');

And here App.vue

<template>
  <div id="app" class="container-fluid">
    <header-component></header-component>
    <main id="content" class="content row">
      <transition name="fade">
        <router-view/>
      </transition>
    </main>
    <footer-component></footer-component>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HeaderComponent from './components/header/header.component';
import FooterComponent from './components/footer/footer.component';

@Component({
  components: {
    HeaderComponent,
    FooterComponent
  }
})
export default class App extends Vue {}
</script>

<style lang="scss">
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
@import "../node_modules/font-awesome/css/font-awesome.min.css";
@import "../node_modules/vue2-animate/dist/vue2-animate.min.css";
@import "./styles/main.scss";
</style>

Vue ^2.5.13, project created via vue cli ^3.0.0-beta.6 (also tried beta.15), using Typescript cli plugin ^3.0.0-beta.6

[jkzing]

./app.vue in ./src/main.ts

shoudn’t app.vue be App.vue?

[Dried09]

Thank you, @jkzing! Problem fixed.

[linzhi]

I solve it by change filename form xxx.scss to xxx.css

[yangfan0095]

此问题已解决 ，仔细看一看 是有好几个eslint插件没有引入进去。 对比vue-cli 和 你的package.json

 "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",

[yangfan0095]

this problem had been solved , the key is that we still need to import some eslint plugin , add these plugin in your package.json ,and npm install

"eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",

[cbgesbocker]

when runing dev-server there throw these two Error

ERROR Failed to compile with 2 errors 10:53:28

These relative modules were not found:

• ./build/dev-client in multi ./build/dev-client ./src/main.js
• ./src/main.js in multi ./build/dev-client ./src/main.js

Listening at http://localhost:8080

node-version 6.8.0
window10
i don't modify the webpack default config, it can run the app sometime but mostly throw the error

I also got this error from not using the correct style attribute. Hope it helps someone!

[matrey]

_(adding a note because search engines still brought me here in 2019)_

I had the same kind of error after cloning a vuejs project on a new machine.
Turns out npm install did not install development packages (maybe it assumed it was a production environment ; I'm using Linux Mint). I had to run an extra npm install --dev to get them, and all "relative modules were not found" errors disappeared.

[DrCord]

I'm still having this problem and none of the solutions above fixed it.

[kamilzielinskidev]

i am so tired of these little vue bugs that it spent my time on. Is this one fixed already by anyone?

[Akryum]

i am so tired of these little vue bugs that it spent my time on. Is this one fixed already by anyone?

Most of the time, those aren't "little vue bugs", but rather issues with user environment. For exemple, having NODE_ENV set to production as an environment variable on the computer will cause npm to only install the dependencies and not the devDependencies.

There is also this upstream issue in friendly-errors-webpack-plugin which cause the error message to be incorrect in the case of the OP.

[lniuniu]

我的问题是：在main.js中有些模块没有引起来，即main.js中的部分import引入的有问题，供参考

[electrocnic]

Spent a whole day on this. In my case, my webpack config used postcss-loader in the rules for css loading, but I did not install it via npm install --save-dev postcss-loader.
The error message said nothing about "postcss-loader", the error was simply

* ./Hello.vue?vue&type=style&index=0&id=361a4bd2&scoped=true&lang=css& in ./src/components/Hello.vue
* ./App.vue?vue&type=style&index=0&lang=scss& in ./src/App.vue

Other two errors, namely

* ./assets/logo.png in ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=template&id=7ba5bd90&
* ./assets/dj.png in ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=template&id=7ba5bd90&

happened for the same general reason and mistake: I had declared (ok I did not but I copied a config which did) a module (and that's what was mentioned by the error, a module could not be found!), which I did not install, in this case: url-loader

installed it via npm install --save-dev url-loader and the error went away.

Basically, you have to watch out that all modules which are used by your webpack config files are also installed in node_modules.

E.g. my webpack config which caused the above problems looked like this:

module: {
        rules: [
            ...
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: vueLoaderConfig
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [resolve('src'), resolve('test')]
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('img/[name].[hash:7].[ext]')
                }
            },

see the url-loader for image files?
(and of course postcss-loader for style files)

You can basically apply that rule for any module which is declared in the config but not appearing in package.json. Install it, the error might go away.

[alexandregncoelho]

import PieChart from '../components/charts/PieChart'

I had a mistake like that. I think it's a reference problem. I simply retyped import of reference with problems and it returned to work.

I used the VSCode and I used de auto-complete to write the import/reference.

I hope that this help you.

[MrThanlon]

Same issue, when importing local JS file. Build server running Linux, I use mac for development.

[monkeymonk]

I've tried to create the "src" directory with an empty "main.js" and I've no longer the error. :-)

[undavide]

I've run into one _"relative modules not found"_ error from a different path (vuetify project with nedb-core). Trying with the suggested:

npm i -g npm-check-updates
npm-check-updates -u
npm install --no-bin-links
npm update

It found some outdated packages (core-js, eslint-plugin-vue, stylus-loader etc) and as a result I now have 4 extra _"relative modules not found"_ errors related to core-js. At this point I have no clue whether it is a webpack issue or what else.

All in all, it feels like a quite fragile development environment.

[bobohuochai]

remove 'import func from './vue-temp/vue-editor-bridge' this statement.
vscode auto will import this statement when enter 'tab' key before declare func

[Generalomosco]

I'm solved by re-install all modules :)

rm -rf node_modules
npm install

Cheer!!!!!!! This actually worked for me!!

[j-000]

I was having a similar issue where I created a component called "Home.vue" and the import statement in the router.js page "import Home from './components/Home.vue';" wasn't working and kept returning me

This relative module was not found:
* ./components/Home.vue in ./src/router.js

1. I stopped the server
2. I deleted Home.vue
3. Created Home.vue
4. Restarted the server and it worked

Why is this? I did not change any dev setting or env variables.

[A1rPun]

In my case I wanted to include ../../ beyond symlinks. I used a better approach to include my local component.

[yarnando]

DELETE everything inside these folders:

• node_modules/.cache/babel-loader
• node_modules/.cache/vue-loader

it worked for me

[danicholls]

Had a line I did not enter in my file: import func from '../../vue-temp/vue-editor-bridge';. @bobohuochai suggests VS Code, and that could be. But simply removing it removed the error.

[6056-DEV]

_(adding a note because search engines still brought me here in 2019)_

I had the same kind of error after cloning a vuejs project on a new machine.
Turns out npm install did not install development packages (maybe it assumed it was a production environment ; I'm using Linux Mint). I had to run an extra npm install --dev to get them, and all "relative modules were not found" errors disappeared.

its work
thanks

[Baldrani]

In my case its due to the use of a symlink to point to a specific ressource.
background-image: url(./v/svg/pswp.default-skin.svg)
However even tough I've added

    chainWebpack: config => {
        config.resolve.set('symlinks', false);
    },

to my vue.config it does not seems to be helping me at all.
If anybody has a solution for symlink I'll be happy to hear.

[electrocnic]

    chainWebpack: config => {
        config.resolve.set('symlinks', false);
    },

@Baldrani Why do you expect it to work when you deactivate symlinks being resolved? Set it to true I guess?

[synergychen]

This might help: create an empty file ./src/main.js

[kapeller77]

I'm solved by re-install all modules :)

rm -rf node_modules
npm install

This almost always works for me.

[gauravmak]

In my case, it was due to multiple entry points. So, instead of

entry: {
  app: [
    'path/to/main.js'
  ]
}

I did

entry: {
  app: 'path/to/main.js'
}

and it worked :)

Ref link

[Amdadulhaquerubel]

help please

This relative module was not found:

• ./Home.vue in ./src/main.js

[MartinDM]

Possibly issue with casing, especially if previously cased differently.

See if this works:
Copy the component and name with lowercase. Then re-write the import using the new lower-case name. Seemed to work.

[RiddhiKcj]

Found the solution:
My working directory was /app in docker. I ran the commands in parent directory and before the npm build command I switched to the /app directory and it worked.

(Dockerfile)
"COPY . /app
RUN npm run build"

[michelepeghini]

I had this problem with scss files.
Managed to fix it by importing the styles.scss in my App.vue file:

Also '@/assets/...' notation rather than relative path './assets/...' could help.
As to why it worked... I don't know. 😞

[amirivno]

whats wrong i have the same problem

[RiddhiKcj]

whats wrong i have the same problem

You might be running the dev-server from within a parent directory

[RiddhiKcj]

I had this problem with scss files.
Managed to fix it by importing the styles.scss in my App.vue file:

Also '@/assets/...' notation rather than relative path './assets/...' could help.
As to why it worked... I don't know.

These errors occur when the dev-server is unable to locate some required files in the respective paths. The notation '@/assets' define a direct path from src folder, i.e, 'src/assets', so it was easy to locate. The relative path './assets' could have been correct too, provided you mention it correctly w.r.t your main.js file location.

[marinescudan]

My case - FIXED
ERROR Failed to compile with 2 errors - This relative module was not found:

• ./@/assets/img/frame.svg in ./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--9-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/app.vue?vue&type=style&index=0&lang=sass&, ./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--9-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/container/cCard.vue?vue&type=style&index=0&id=05e76aa5&scoped=true&lang=sass&

In my case it was fixed by adding a "~" to url
before
@mixin boxLight { border-image: url('@/assets/img/frame.svg')}
after - fixed
@mixin boxLight { border-image: url('~@/assets/img/frame.svg')}

[twilsonpierce]

This was weird for me, I received this error ERROR in ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css& friendly-errors 15:09:52 Module build failed (from ./node_modules/css-loader/dist/cjs.js): friendly-errors 15:09:52 ValidationError: CSS Loader Invalid Options options should NOT have additional properties

I had both css-loader and sass-loader installed in my application. I thought css-loader may have been the problem due to me just needing to use sass, so I uninstalled it, received another error but then when I re-installed it back, my application ran successfully, error-free.

Hope this may help someone

[towry]

Consider removing the babel-loader cache folder.

[serdarkaracay]

Hi everyone,
I encountered a very interesting problem.
Here code repository https://github.com/serdarkaracay/starter-node-vue
docker-compose up --build > output

web app response

[udemezue01]

DELETE everything inside these folders:

• node_modules/.cache/babel-loader
• node_modules/.cache/vue-loader

it worked for me

yeah tried it also

[gevinduM]

Had a line I did not enter in my file: import func from '../../vue-temp/vue-editor-bridge';. @bobohuochai suggests VS Code, and that could be. But simply removing it removed the error.

This work for me, Thanks!

[Qiner0900]

help please

This relative module was not found:

• ./Home.vue in ./src/main.js

how did u solve?

[GittyAjay]

check your resources path if it is not in the same folder then use double dot instead of single dot in my case

<img alt='log' src='../assets/logo.png'>
Here image file is present in assets folder which is not in same directory

[MaxmaxmaximusGitHub]

I run everything in the Docker container, and the working folder was not the one with which I registered the files in tsconfig.json; apparently tsconfig.json inclide, trying to get files NOT relative to the location of the tsconfig.json file, but relative to the current WORKING DIRECTORY through which the script is running.

I hope no one forgot to register ts extensions in webpack config? =))

  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },

[jasmeetsohal]

Let me answer your question.

All modules and libraries are linked at the time when you run command vue create my-app it will bundle whole package and link as per the config. Now in your case it works well when you run your app inside default template, if you run out of it throws error.
The simple solution for the same is to omit relative path with absolute path .