CODEWITHSUNDEEP
vue.jsvue-loader
Fendi Tri Cahyono
Fendi Tri Cahyono

Reputation: 702

Vue Loader Can't resolve '@'

Version

15.4.0

Reproduction link

https://codepen.io/fendi-tri-cahyono/pen/wbXKMZ?editors=0010

Steps to reproduce

ERROR in ./node_modules/vue-extend-layout/vue-extend-layout.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-extend-layout/vue-extend-layout.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '@' in '/Users/fenditricahyono/Projects/titipbeliin/titipbeliin-vue/node_modules/vue-extend-layout'
 @ ./node_modules/vue-extend-layout/vue-extend-layout.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-extend-layout/vue-extend-layout.vue?vue&type=script&lang=js&) 50:19-96
 @ ./node_modules/vue-extend-layout/vue-extend-layout.vue?vue&type=script&lang=js&
 @ ./node_modules/vue-extend-layout/vue-extend-layout.vue
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue
 @ ./src/main.js

What is expected?

can resove for import Something from '@/something.vue', not only import Something from '../../something.vue',

What is actually happening?

Module not found: Error: Can't resolve '@' in '/Users/fenditricahyono/Projects/titipbeliin/titipbeliin-vue/node_modules/vue-extend-layout'

Upvotes: 0

Views: 2767

Answers (1)

Yom T.
Yom T.

Reputation: 9180

To expand on Phil's comment, I'm assuming you didn't initialize the project with Vue CLI (by the look of your webpack config), what you are looking for should be an alias (represented with the @ symbol that is commonly used and/or produced by the CLI) that maps to the root path of your project directory. So try adding the following extra line under the resolve.alias object:

{
  // ...

  resolve: {
    alias: {
      // Relative path to your root dir (adjust accordingly)
      '@': path.resolve(__dirname, './src'),

      vue$: 'vue/dist/vue.esm.js',
    },
    extensions: ['*', '.js', '.vue', '.json'],
  },

  // ...
}

Upvotes: 2

Related Questions