These relative modules were not found:

williamstar commented 7 years ago

when runing dev-server there throw these two Error

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

./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

6056-DEV commented 5 years ago

(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 commented 5 years ago

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 commented 5 years ago

    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 commented 5 years ago

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

kapeller77 commented 5 years ago

I'm solved by re-install all modules :)
rm -rf node_modules
npm install
This almost always works for me.

gauravmak commented 5 years ago

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 commented 4 years ago

help please

This relative module was not found:

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

MartinDM commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

whats wrong i have the same problem

RiddhiKcj commented 4 years ago

whats wrong i have the same problem

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

RiddhiKcj commented 4 years ago

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 commented 4 years ago

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

thebadasscoder commented 4 years ago

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 commented 4 years ago

Consider removing the babel-loader cache folder.

serdarkaracay commented 4 years ago

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 commented 4 years ago

DELETE everything inside these folders:

node_modules/.cache/babel-loader

node_modules/.cache/vue-loader

it worked for me

yeah tried it also

gevinduM commented 4 years ago

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 commented 4 years ago

help please

This relative module was not found:

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

how did u solve?

GittyAjay commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 .

mgb389-2 commented 4 years ago

It seems that I caused this problem because I changed the paths of my imports when I was running my application with npm run serve. This made my cache upset.

I simply stopped the application (Ctrl + c) changed the path back. Ran the application again (npm run serve) and made sure it was back to normal. Stopped the application (ctrl +c), changed my paths and then I ran it again.

In conclusion, do not change any paths when the app is running. You must stop it first and run it again.

The imports look something like this:

import Navbar from '../../components/modifiedPath/Navbar'

patrickryan79 commented 4 years ago

For anyone still reading and realized their issue was slightly different, make sure the case matches what's in the directory.

import somefile from "./path/SomeFile.vue";

My app worked flawlessly until I upgraded my tooling. If my file name was somefile.vue or someFile.vue it failed with a similar error.

patrickjh commented 4 years ago

For people still struggling with this you may try specifying the file to serve in package.json. This moved me past this error. I changed: "serve": "vue-cli-service serve" to "serve": "vue-cli-service serve src/main.ts"

I started running into another error at this point, but this at least resolved the "this relative module was not found" error

Leon-MK commented 3 years ago

In my case I simply forgot I was trying to reference the old file in a different component! Most likely human error

Previesam commented 3 years ago

in case you are having the

`This relative module was not found:

../vue-temp/vue-editor-bridge in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./layouts/default.vue?vue&type=script&lang=js&`

look for import func from '..vue-temp/vue-editor-bridge' in your template and remove it

neumond commented 3 years ago

Somehow, after mounting public & src folders in read-only mode the error disappears. I suspect this is related to fsevents.

emilhein commented 3 years ago

What worked for me, was somehow described above. Hope it help someone else. Add the following to your vue.config.js:

configureWebpack: {
    entry: {
      app: './src/entry/index.js' // or whatever your entry is
    }
}

VelizarHristov commented 3 years ago

In my case the problem was that it was looking for a main.js file in my code but couldn't find it - instead I had an app.js with the same functionality, so I renamed my app.js to main.js.

busurmankulov577 commented 3 years ago

ERROR Failed to compile with 2 errors 13:46:35

These relative modules were not found:

./components/TodoList 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/views/Todos.vue?vue&type=script&lang=js&
./components/addTodo 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/views/Todos.vue?vue&type=script&lang=js& Хелп

flavio-marchi commented 3 years ago

Adjusting the serve script in the package.json solved the issue for me too: "serve": "vue-cli-service serve resources/js/app.js"

enversaypr commented 3 years ago

I have same problem and I still could not solve that problem. Npm works well on my local but I use Buildkite for git. When buildkite try to do that, it response like this. Do you have any suggestion for that ?

/var/www/winstag-api/resources/assets/sass/app.scss in multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

| | To install it, you can run: npm install --save /var/www/winstag-api/resources/assets/sass/app.scss | | | These relative modules were not found: | | ./mixins/http-mixin.vue in ./resources/assets/js/app.js | ./components/dashboard-burger-menu.vue in ./resources/assets/js/app.js

DarthSett commented 3 years ago

just solved it after 2 hours I had the following errors when I tried to run the default app without configuring anything right after I created the project:

These dependencies were not found:

/Users/newuser/Documents/projects/wheel/ProjectName/node_modules/webpack-dev-server/client/index.js?http://10.0.0.4:8080/sockjs-node in multi ../ProjectName/node_modules/webpack-dev-server/client?http://10.0.0.4:8080/sockjs-node ../ProjectName/node_modules/webpack/hot/dev-server.js ./src/main.js, multi ../ProjectName/node_modules/webpack-dev-server/client?http://localhost ../ProjectName/node_modules/webpack/hot/dev-server.js ../ProjectName/node_modules/webpack-dev-server/client?http://10.0.0.4:8080/sockjs-node ./src/main.js /Users/newuser/Documents/projects/wheel/ProjectName/node_modules/webpack-dev-server/client/index.js?http://localhost in multi ../ProjectName/node_modules/webpack-dev-server/client?http://localhost ../ProjectName/node_modules/webpack/hot/dev-server.js ../ProjectName/node_modules/webpack-dev-server/client?http://10.0.0.4:8080/sockjs-node ./src/main.js /Users/newuser/Documents/projects/wheel/ProjectName/node_modules/webpack/hot/dev-server.js in multi ../ProjectName/node_modules/webpack-dev-server/client?http://10.0.0.4:8080/sockjs-node ../ProjectName/node_modules/webpack/hot/dev-server.js ./src/main.js, multi ../ProjectName/node_modules/webpack-dev-server/client?http://localhost ../ProjectName/node_modules/webpack/hot/dev-server.js ../ProjectName/node_modules/webpack-dev-server/client?http://10.0.0.4:8080/sockjs-node ./src/main.js To install them, you can run: npm install --save /Users/newuser/Documents/projects/wheel/ProjectName/node_modules/webpack-dev-server/client/index.js?http://10.0.0.4:8080/sockjs-node /Users/newuser/Documents/projects/wheel/ProjectName/node_modules/webpack-dev-server/client/index.js?http://localhost /Users/newuser/Documents/projects/wheel/ProjectName/node_modules/webpack/hot/dev-server.js

This relative module was not found:

./src/main.js in multi ../ProjectName/node_modules/webpack-dev-server/client?http://10.0.0.4:8080/sockjs-node ../ProjectName/node_modules/webpack/hot/dev-server.js ./src/main.js, multi ../ProjectName/node_modules/webpack-dev-server/client?http://localhost ../ProjectName/node_modules/webpack/hot/dev-server.js ../ProjectName/node_modules/webpack-dev-server/client?http://10.0.0.4:8080/sockjs-node ./src/main.js

In order to fix this, I had to change the names of all the folders in my path to not contain any upper case letters and voila, it fixed it

Hope this helps :)

partrickJhonson commented 3 years ago

Tive esse problema ao tentar importar um componente que estava em um diretirio a um nivel abaixo do diretotio do componente, resolvi passando o caminho completo do componente , exp do erro:import objeto from "./src/servirces/Objeto" solucção: import objeto from "/home/peog-05linux/Desktop/Tp01SD/frontend/src/servirces/Objeto.js"

william-keller commented 3 years ago

In my case, some VS Code extension had added accidentally an import that i don't need. The import was " import func from 'vue-editor-bridge';" Just removed it and works perfectly again I Hope it can help someone

ShuYiGengYun commented 3 years ago

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 .

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 .

thanks it works for me

AnkitaGupta00 commented 2 years ago

../webfonts/fa-brands-400.eot in ./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-1-2!./src/assets/css/all.min.css

the error instructed to install " npm install --save" this module after installed this I got same error please help me

vuejs / vue-cli