[Vue.js] Vue-CLI 4 + Vue 3 + Vue-router 4 / “Cannot find module '@vue/compiler-sfc/package.json' ” 에러 해결
2020-12-14 기준으로 작성
- Vue-CLI 4 에서 Vue 3 를 이용하려니 아래와 같은 에러 발생
- Cannot find module '@vue/compiler-sfc/package.json'
1) Vue CLI 설치
npm install -g @vue/cli
cli.vuejs.org/guide/installation.html
Installation | Vue CLI
Installation Warning regarding Previous Versions The package name changed from vue-cli to @vue/cli. If you have the previous vue-cli (1.x or 2.x) package installed globally, you need to uninstall it first with npm uninstall vue-cli -g or yarn global remove
cli.vuejs.org
2) Vue Router 설치
npm install vue-router@4
next.router.vuejs.org/installation.html
Installation | Vue Router
Installation Direct Download / CDN https://unpkg.com/vue-router@4 Unpkg.com provides npm-based CDN links. The above link will always point to the latest release on npm. You can also use a specific version/tag via URLs like https://unpkg.com/vue-router@3.0.
next.router.vuejs.org
3) package.json 에서 vue 버전 변경
- Vue Router 4 는 Vue 3 이상부터 사용 가능
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.4",
"vue-router": "^4.0.1"
}
4) 에러 발생 및 해결
- 현재 시점에서 Vue-CLI 로는 Vue 2 가 설치되기때문에, Vue 3 와 호환되도록 마이그레이션이 필요.
yarn add vue@next yarn add @vue/compiler-sfc -D
yarn add @vue/compiler-sfc -D
yarn remove vue-template-compiler (remove the old dependency)