vue-cli npm run serve hits error "cache-loader --> failed to compile ---> this relative module was not found"

[dhonx]

Version

3.5.5

Reproduction link

https://github.com/donnisnoni95/oesx

Environment info

Environment Info:

  System:
    OS: Linux 4.15 Linux Mint 19.1 (Tessa)
    CPU: (4) x64 Intel(R) Core(TM) i3-4005U CPU @ 1.70GHz
  Binaries:
    Node: 10.15.3 - /usr/bin/node
    Yarn: Not Found
    npm: 6.4.1 - /usr/bin/npm
  Browsers:
    Chrome: 73.0.3683.103
    Firefox: Not Found
  npmGlobalPackages:
    @vue/cli: 3.5.5

Steps to reproduce

change my function of my component

What is expected?

hot reloading

What is actually happening?

looking for removed files in cache and idk what to do to clear it / reset it (not browser cache)

---

This relative module was not found:

* ../../../../vue-temp/vue-editor-bridge in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./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/manage/mahasiswa/View.vue?vue&type=script&lang=js&

[LinusBorg]

Hi

Thanks for filing this issue! Could you please provide a small reporduction in a repository, as is required by the issue guidelines, so we can debug this without trying to replicate this ourselves?`

That would be very helpful, thanks!

[suit0r]

hey. i had this problem before, and it turned out to be a rogue func snippet that adds an import statement that doesn't resolve to anything. check your directory for something like this:
import func from '../../vue-temp/vue-editor-bridge';

hope this helps. worked for me

[hudson940]

I have this issue when I try to use firebase collection forEach method

`Failed to compile with 1 errors 04:45:29

This dependency was not found:

• core-js/modules/web.dom.iterable in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.j
  s!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-op
  tions!./src/views/backend/Categories.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save core-js/modules/web.dom.iterable`

could you help me?

[LinusBorg]

Yeah well this import is defined in the View.vue file but it doesn't exist.

https://github.com/donnisnoni95/oesx/blob/master/src/views/manage/mahasiswa/View.vue#L163

[abdelgzali]

This error usually happens when I rename a component and forget to change the file name

[Topinaqui]

This solution worked, very well, and is simple. Follow the link to the post bellow:

https://github.com/vuejs/vue-cli/issues/3784#issuecomment-481697868

[dhonx]

Thank you all...

[christina-immanuel]

Hi, I'm facing this same error on compile, when I try to import mutations in my vue file.

This relative module was not found:

                                                                                                                                            s.js??ref--0-0!./node_

• ../graphql/mutations 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/SubmitFile.vue?vue&type=script&lang=js

Any help is appreciated.

[suit0r]

@christina-immanuel check for an incorrectly written/referenced import statement

[christina-immanuel]

@suit0r ..Well the file exists and the import statement was working fine until I added a new field to my graphQL schema...I had the same error couple of days back when I renamed a file from the original name to a new name. Once I named it back, it was all fine.

For this, I need that new schema field so I cant possibly use the old schema. I also tried deleting the API and added a new API but the error still exists, I also tried reinstalling npm, installing these modules and deleting files under the node modules --> .cache folder

[onuruzun]

I had the same problem, the name of the * .vue file that I had previously changed was cached, and the error was getting in build because Vue is case-sensitive.

where I import;
import Example from "./components/Example.vue";

I imported it as, but it always saw the filename as 'example'. The problem was solved when I removed the file and re-added its name as case-sensitive as in import.

[mustafa-korkmaz]

I had the same problem. Removing and re-adding the file with case sensitivity didn't work for me. And the more interesting thing that the application was getting errors only in Github actions or Azure pipeline builds inside docker containers. Both builds are set with Dockerfile and I wasn't getting any errors on my local docker builds.

Lets assume file name is _Signup.vue_ and the component name was _Signup_
where I imported the file is;
import Signup from "./components/Signup.vue";

Here the steps which worked for me:

1. Deleted the file
2. Added the file with renaming it SignupForm.vue
3. Renamed the component name to SignupForm
4. I only changed the import statement path, didn't touch the imported component name.
   _import Signup from "./components/SignupForm.vue";_
5. Finally built it successfully inside of a docker container.

[fleetofthemalden]

I am currently experiencing this issue. I renamed one of my assets, and changed all of the references in the project. I even searched node modules and no references to the old file name remain. Yet I still see the error for the old asset name. I even tried deleting node_modules. Still get the error.

[suit0r]

it's most likely an empty import caused by intellisense or autocomplete. you probably selected a suggestion by accident and your autoimport realized you hadn't imported that module yet and tries to do its best. look for an import you hadn't declared.

[jmarrr]

I get this issue too, renaming files is the cause for me

[cioccarellia]

My issue was I was simply leaving an <img src="..." /> somewhere and vue just somehow forgot to point it out and gave me an awkward error:

./src/components/recipes/RecipeItem.vue?vue&type=template&id=90cc63ca&scoped=true& (./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"2f9f4e7c-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/recipes/RecipeItem.vue?vue&type=template&id=90cc63ca&scoped=true&)

I tried npm clean-install, removing different packages, downgrading to older versions, changing file names & imports, and it was none of these things.

[cioccarellia]

I've now submitted an Issue to the vue developers explaining my scenario. Hope it gets fixed soon :)

[free999enigma]

news?
My Problem looks like

data () { return { images: { thumb: require("./default-thumb.png"), logo: ("./a.png")

the "thumb" image gets retrieved and displayed like
<img :src="images.thumb" style="width:100%;">
but when it comes to "logo" image it displays nothing
<img :src="images.logo" style="width:100%;">

[ajaykumars017]

98% after emitting CopyPlugin

ERROR Failed to compile with 1 errors

This relative module was not found:

./selecting-values/SelectingValuesSingleMultipleSelection.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/views/components/extra-components/select/SelectSelectingValues.vue?vue&type=script&lang=js&

_This is what i am facing when i use "npm run serve" command, any ideas?_