[Vue.js]Module not found: Error: Can't resolve ~ 에러 해결 방법

문제

 

DeleteModal.vue에서 Modal.vue을 import 하려고 하는데 다음과 같은 에러가 발생했습니다.

분명 {경로} 에 나타나는 부분에 Modal.vue 파일이 있었는데도 에러가 발생했습니다.

오늘은 이에 대한 해결책에 대해 포스팅하겠습니다.

 

Module not found: Error: Can't resolve ~

Module not found: Error: Can't resolve '@components/Modal.vue' in '{경로}'

ERROR in ./src/components/DeleteModal.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/DeleteModal.vue?vue&type=script&lang=js) 1:0-42
Module not found: Error: Can't resolve '@components/Modal.vue' in '{경로}'
 @ ./src/components/DeleteModal.vue?vue&type=script&lang=js 1:0-203 1:0-203 1:204-396 1:204-396
 @ ./src/components/DeleteModal.vue 2:0-62 3:0-57 3:0-57 6:49-55
 @ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/TodoList.vue?vue&type=script&lang=js 4:0-55 8:4-15
 @ ./src/components/TodoList.vue?vue&type=script&lang=js 1:0-200 1:0-200 1:201-390 1:201-390
 @ ./src/components/TodoList.vue 2:0-59 3:0-54 3:0-54 8:49-55
 @ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/pages/todos/index.vue?vue&type=script&lang=js 3:0-49 10:4-12
 @ ./src/pages/todos/index.vue?vue&type=script&lang=js 1:0-203 1:0-203 1:204-396 1:204-396
 @ ./src/pages/todos/index.vue 2:0-56 3:0-51 3:0-51 6:49-55
 @ ./src/router/index.js 3:0-45 16:15-20
 @ ./src/main.js 3:0-30 4:19-25

webpack compiled with 1 error

 

DeleteModal.vue

<script>
import Modal from '@components/Modal.vue';
</script>

 

개발 환경

 

VS Code

Vue3

 

 

원인

'@' 는 루트 디렉토리 (src) 를 가리키는데 @ 뒤에 / 를 빼먹은 것이 원인이었음을 글을 쓰다가 깨달았습니다. 그래서 뒤에 /을 붙여주면 됩니다. @components 로도 하는 방법은 vue.config.js 에 alias를 직접적으로 설정 해주면 됩니다.

 

 

해결책

방법1

@ 뒤에 / 을 붙입니다.

<script>
import Modal from '@/components/Modal.vue';
</script>

 

방법2

vue.config.js 에서 configureWebpack을 통해 import 하려는 alias 를 설정해줍니다. (위 예제에선 @components)

 

vue.config.js

const { defineConfig } = require('@vue/cli-service')
const path = require('path')

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    resolve: {
      alias: {
        "@components": path.resolve(__dirname, "src/components")
      }
    }
  }
})

 

별도의 경로로 설정하여 한 곳에서 관리하고 싶은 경우 방법2을 사용하면 될 것으로 보입니다.