Vue 3 패키지 버전이 일치하지 않음

Vue 3 패키지 버전이 일치하지 않음

작성한 패키지를 vue 3으로 업데이트하려고 하는데 vue-template-compiler에 문제가 있습니다.

비슷한 문제가 있는 비슷한 게시물을 팔로우하려고 했지만 잘 되지 않는 것 같습니다.(Vue 패키지 버전 불일치)

다음 오류가 발생하였습니다.

> @utt/message-system@1.1.4 build:es
> cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es

[!] Error: 

Vue packages version mismatch:

- vue@3.1.1 (C:\projects\UTT-Message-System\module\node_modules\vue\index.js)
- vue-template-compiler@2.6.14 (C:\projects\UTT-Message-System\module\node_modules\vue-template-compiler\package.json)

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

Error: 

Vue packages version mismatch:

- vue@3.1.1 (C:\projects\UTT-Message-System\module\node_modules\vue\index.js)
- vue-template-compiler@2.6.14 (C:\projects\UTT-Message-System\module\node_modules\vue-template-compiler\package.json)

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

    at Object.<anonymous> (C:\projects\UTT-Message-System\module\node_modules\vue-template-compiler\index.js:10:9)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Object.require.extensions.<computed> [as .js] (C:\projects\UTT-Message-System\module\node_modules\rollup\dist\shared\loadConfigFile.js:516:13)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (C:\projects\UTT-Message-System\module\node_modules\@vue\component-compiler\dist\compiler.js:26:26)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Object.require.extensions.<computed> [as .js] (C:\projects\UTT-Message-System\module\node_modules\rollup\dist\shared\loadConfigFile.js:516:13)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)

[nodemon] app crashed - waiting for file changes before starting...

---

업데이트: 사용rollup-plugin-vuevue 3과 호환되지 않기 때문에 설치했습니다.rollup-plugin-vue@next이제 vue-template-compiler를 내 안에 넣지 않고package-lock.json파일.

하지만 플러그인 바벨에 새로운 오류가 발생하여 이 문제를 해결하려고 합니다.누구나 아이디어를 공유해 주시면 감사하겠습니다.

[!] (plugin babel) SyntaxError: C:\projects\UTT-Message-System\module\Components\MessageContainer.vue?vue&type=style&index=0&id=3d58915e&lang.css: Unexpected token (2:0)

  1 |
> 2 | ._messageList_yig6l_3 {
    | ^
  3 |   position: absolute;
  4 |   display: flex;
  5 |   flex-direction: column;
Components\MessageContainer.vue?vue&type=style&index=0&id=3d58915e&lang.css (2:0)
SyntaxError: C:\projects\UTT-Message-System\module\Components\MessageContainer.vue?vue&type=style&index=0&id=3d58915e&lang.css: Unexpected token (2:0)

  1 |
> 2 | ._messageList_yig6l_3 {
    | ^
  3 |   position: absolute;
  4 |   display: flex;
  5 |   flex-direction: column;
    at Parser._raise (C:\projects\UTT-Message-System\module\node_modules\@babel\parser\src\parser\error.js:134:45)
    at Parser.raiseWithData (C:\projects\UTT-Message-System\module\node_modules\@babel\parser\src\parser\error.js:129:17)
    at Parser.raise (C:\projects\UTT-Message-System\module\node_modules\@babel\parser\src\parser\error.js:78:17)
    at Parser.unexpected (C:\projects\UTT-Message-System\module\node_modules\@babel\parser\src\parser\util.js:179:16)
    at Parser.parseExprAtom (C:\projects\UTT-Message-System\module\node_modules\@babel\parser\src\parser\expression.js:1202:20)
    at Parser.parseExprSubscripts (C:\projects\UTT-Message-System\module\node_modules\@babel\parser\src\parser\expression.js:613:23)
    at Parser.parseUpdate (C:\projects\UTT-Message-System\module\node_modules\@babel\parser\src\parser\expression.js:593:21)
    at Parser.parseMaybeUnary (C:\projects\UTT-Message-System\module\node_modules\@babel\parser\src\parser\expression.js:560:23)
    at Parser.parseExprOps (C:\projects\UTT-Message-System\module\node_modules\@babel\parser\src\parser\expression.js:364:23)
    at Parser.parseMaybeConditional (C:\projects\UTT-Message-System\module\node_modules\@babel\parser\src\parser\expression.js:329:23)

[nodemon] app crashed - waiting for file changes before starting...

도와 주셔서 감사해요.

를 사용하여 앱에서 "vue-module-module"

npm uninstall vue-template-compiler

그런 다음 vue-variable-sfc를 대체하는 컴파일러-sfc를 설치합니다.

npm i -D @vue/compiler-sfc

패키지에 vue-module-module이 없는지 확인합니다.json을 실행하면 vue/cfs가 표시됩니다.

vue-timeout-module을 삭제했으므로 vue-timeout은 동작하기 위해 필요한 것이므로 다음 명령어를 사용하여 vue 3에서도 동작하도록 업그레이드합니다.

npm install vue-loader@next

업그레이드 중이기 때문에 프로젝트 구성에 따라 다른 오류가 발생할 수 있습니다.하지만 계속 해결하면 곧 작동하게 될 것이다.

언급URL : https://stackoverflow.com/questions/67966529/vue-3-package-version-mismatch