Joonas' Note
[Vue.js] Module not found: Error: Can't resolve... 본문
Vue-cli를 설치 후, 테스트할 겸 간단하게 페이지를 작성하고 빌드를 해보았다. 그리고 다음과 같은 에러가 났다...
default@joonas-ubuntu:~/express-vuejs/frontend
$ npm run build
> frontend@1.0.0 build /home/default/express-vuejs/frontend
> node build/build.js
Hash: cedc7ad1a63fb20beeff
Version: webpack 3.12.0
Time: 4256ms
Asset Size Chunks Chunk Names
static/js/vendor.3fae27b6d0a0572472a3.js 126 kB 0 [emitted] vendor
static/js/app.076f945ac50b5f85ae7c.js 9.72 kB 1 [emitted] app
static/js/manifest.2ae2e69a05c33dfc65f8.js 857 bytes 2 [emitted] manifest
static/css/app.86a4513a3e04c0dcb73e6d6aea4580e4.css 237 bytes 1 [emitted] app
static/css/app.86a4513a3e04c0dcb73e6d6aea4580e4.css.map 459 bytes [emitted]
static/js/vendor.3fae27b6d0a0572472a3.js.map 620 kB 0 [emitted] vendor
static/js/app.076f945ac50b5f85ae7c.js.map 13.5 kB 1 [emitted] app
static/js/manifest.2ae2e69a05c33dfc65f8.js.map 4.97 kB 2 [emitted] manifest
index.html 510 bytes [emitted]
ERROR in ./src/router/index.js
Module not found: Error: Can't resolve 'components/IndexPage' in '/home/default/express-vuejs/frontend/src/router'
@ ./src/router/index.js 4:0-41
@ ./src/main.js
Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! frontend@1.0.0 build: `node build/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the frontend@1.0.0 build script.npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
여기서 사용된 패키지들의 버전은 vue@2.5.2, vue-router@3.0.1, webpack@3.6.0 이다.
다음과 같이 수정해서 해결했다. (주석 표시된 부분이 오류가 나던 코드 라인)
그런데 이상하다. 주석 표시된 코드는 다른 버전(vue@2.4.4, vue-router@2.7.0, webpack@2.2.1)에서는 잘 동작했다. 버전이 문제인가 싶어서 에러가 나던 상황과 최대한 비슷하게 버전을 맞춰봐도 같은 오류가 나오지는 않는다.
그러던 중 build/webpack.base.conf.js 라는 설정 파일 하나를 발견했다.
위는 낮은 버전이고, 아래는 상대적으로 높은 버전이었다. webpack 패키지가 2.2.1과 3.6.0 으로 메이저 버전이 다르다는 정도?
34번 줄을 보면 @ 심볼이 src 디렉토리로 resolve 되어있는 것을 알 수 있다.
@/components 처럼 앞에 @의 유무로 빌드 오류가 나거나 안 나는 이유가 이 설정파일의 차이에 있었다.
빌드 환경 설정을 잘 확인하자.
'개발' 카테고리의 다른 글
실시간 음성 감지 및 자동 번역 크롬 확장 프로그램 개발기 (2편) (14) | 2019.04.10 |
---|---|
실시간 음성 감지 및 자동 번역 크롬 확장 프로그램 개발기 (1편) (15) | 2019.01.31 |
대용량 더미 파일 생성 (fallocate) (0) | 2018.11.03 |
socket.io 연결 실패 해결하기 (7) | 2018.07.23 |
Github 파일 사이즈 제한 (0) | 2018.05.04 |