After upgrading to vue-cli-4, relative paths no longer work in standard imports

Question

This is another case of procrastinating on upgrading my build tools because each time I do, I find a plethora of changes that I have to work through.

I created a new project using vue cli 4.5, and it loaded, just like a fresh new project would. I then duplicated what the new project looked like as far as dependencies, configuration files, etc. I deleted node_modules, even removed package lock, ran npm install and then npm run serve and getting bizarre cache errors that I see all over the web, but nothing has worked for me.

This dependency was not found:

@/components/renderers/Loader 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/grids/shared.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save @/components/renderers/Loader

These relative modules were not found:

./Icon.vue in ./src/components/icons/index.js

../../renderers/Loader in ./node_modules/cache-loader/dist/cjs.js??ref--12-

etc etc

Here's my package.json

{ 
  "name": "myapp",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "Me",
  "license": "MIT",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.3.0",
    "vuex": "^3.4.0",
    "sass-loader": "^9.0.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Here's my vue.config.js

module.exports = {


  publicPath: process.env.NODE_ENV === 'production' ? '/AppFolder/dist/' : 'http://localhost:8080/dist/',
  runtimeCompiler: true,  
  css: {
    // Enable CSS source maps.
    sourceMap: process.env.NODE_ENV !== 'production'
  },
  devServer: {
    headers: { "Access-Control-Allow-Origin": "*" },
    port: 8080,
    disableHostCheck: true,
    overlay: {
      warnings: true,
      errors: true
    }
  }
}

Then tried deleting my vue.config.js...

And babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

Everything was working perfectly fine before. The out of the box app has no issue with relative or alias (i.e. @).

A little confused here!

user1447679 user1447679 · Accepted Answer · 2020-08-21T20:29:43

It seems after spending hours trying to figure out a problem, I find the answer after posting on SO.

I don't know how or why, but in my IDE (Visual Studio) the casing was different from the actual file system. I created the file through the IDE so who knows.

Now I'm going to try to track down this breaking change. So anyone out there that runs into something similar, make sure the filename in the actual folder matches exactly.

After upgrading to vue-cli-4, relative paths no longer work in standard imports

1 Answers