Joonas' Note

Joonas' Note

[Vue.js] Module not found: Error: Can't resolve... 본문

개발

[Vue.js] Module not found: Error: Can't resolve...

2018. 11. 22. 15:38 joonas

    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 처럼 앞에 @의 유무로 빌드 오류가 나거나 안 나는 이유가 이 설정파일의 차이에 있었다.

    빌드 환경 설정을 잘 확인하자.

    Comments