title: After upgrading to vue-cli-4, relative paths no longer work in standard imports
body: <p>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.</p>
  <p>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 <code>npm install</code> and then <code>npm run serve</code> and getting bizarre cache errors that I see all over the web, but nothing has worked for me.</p>
  <p>This dependency was not found:</p>
  <p>@/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&amp;type=script&amp;lang=js&amp;</p>
  <p>To install it, you can run: npm install --save @/components/renderers/Loader</p>
  <p>These relative modules were not found:</p>
  <p>./Icon.vue in ./src/components/icons/index.js</p>
  <p>../../renderers/Loader in ./node_modules/cache-loader/dist/cjs.js??ref--12-</p>
  <p>etc etc</p>
  <p>Here's my package.json</p>
  <pre><code>{ 
    &quot;name&quot;: &quot;myapp&quot;,
    &quot;description&quot;: &quot;A Vue.js project&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;author&quot;: &quot;Me&quot;,
    &quot;license&quot;: &quot;MIT&quot;,
    &quot;scripts&quot;: {
      &quot;serve&quot;: &quot;vue-cli-service serve&quot;,
      &quot;build&quot;: &quot;vue-cli-service build&quot;,
      &quot;lint&quot;: &quot;vue-cli-service lint&quot;
    },
    &quot;dependencies&quot;: {
      &quot;core-js&quot;: &quot;^3.6.5&quot;,
      &quot;vue&quot;: &quot;^2.6.11&quot;,
      &quot;vue-router&quot;: &quot;^3.3.0&quot;,
      &quot;vuex&quot;: &quot;^3.4.0&quot;,
      &quot;sass-loader&quot;: &quot;^9.0.3&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@vue/cli-plugin-babel&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/cli-plugin-eslint&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/cli-service&quot;: &quot;~4.5.0&quot;,
      &quot;babel-eslint&quot;: &quot;^10.1.0&quot;,
      &quot;eslint&quot;: &quot;^6.7.2&quot;,
      &quot;eslint-plugin-vue&quot;: &quot;^6.2.2&quot;,
      &quot;vue-template-compiler&quot;: &quot;^2.6.11&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;root&quot;: true,
      &quot;env&quot;: {
        &quot;node&quot;: true
      },
      &quot;extends&quot;: [
        &quot;plugin:vue/essential&quot;,
        &quot;eslint:recommended&quot;
      ],
      &quot;parserOptions&quot;: {
        &quot;parser&quot;: &quot;babel-eslint&quot;
      },
      &quot;rules&quot;: {}
    },
    &quot;browserslist&quot;: [
      &quot;&gt; 1%&quot;,
      &quot;last 2 versions&quot;,
      &quot;not dead&quot;
    ]
  }
  </code></pre>
  <p>Here's my vue.config.js</p>
  <pre><code>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: { &quot;Access-Control-Allow-Origin&quot;: &quot;*&quot; },
      port: 8080,
      disableHostCheck: true,
      overlay: {
        warnings: true,
        errors: true
      }
    }
  }
  </code></pre>
  <p>Then tried deleting my vue.config.js...</p>
  <p>And babel.config.js</p>
  <pre><code>module.exports = {
    presets: [
      '@vue/cli-plugin-babel/preset'
    ]
  }
  </code></pre>
  <p>Everything was working perfectly fine before. The out of the box app has no issue with relative or alias (i.e. @).</p>
  <p>A little confused here!</p>