升级到 vue 3 后：“找不到模块 '@vue/compiler-sfc/package.json'”

Posted 2023-02-18

技术标签:

【中文标题】升级到 vue 3 后：“找不到模块 \'@vue/compiler-sfc/package.json\'”【英文标题】：After upgrading to vue 3 : "Cannot find module '@vue/compiler-sfc/package.json' "升级到 vue 3 后：“找不到模块 '@vue/compiler-sfc/package.json'” 【发布时间】：2020-12-30 22:20:40 【问题描述】：

升级到 vue 3 后：纱线添加 vue@next

执行 yarn electron:serve 时出现此错误：“找不到模块 '@vue/compiler-sfc/package.json”

(base) marco@pc01:~/webMatters/electronMatters/GGC-Electron$ yarn add vue@next
yarn add v1.22.5
warning ../package.json: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.3: The platform "linux" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > element-ui@2.13.2" has incorrect peer dependency "vue@^2.5.17".
warning " > vue-class-component@7.2.5" has incorrect peer dependency "vue@^2.0.0".
warning " > vuex@3.5.1" has incorrect peer dependency "vue@^2.0.0".
warning " > vuex-class@0.3.2" has incorrect peer dependency "vue@^2.5.0".
warning " > @vue/test-utils@1.0.5" has incorrect peer dependency "vue@2.x".
warning " > vue-types@2.0.1" has incorrect peer dependency "vue@^2.0.0".
[4/4] Building fresh packages...

success Saved lockfile.
success Saved 8 new dependencies.
info Direct dependencies
└─ vue@3.0.0-rc.10
info All dependencies
├─ @vue/compiler-core@3.0.0-rc.10
├─ @vue/compiler-dom@3.0.0-rc.10
├─ @vue/reactivity@3.0.0-rc.10
├─ @vue/runtime-core@3.0.0-rc.10
├─ @vue/runtime-dom@3.0.0-rc.10
├─ csstype@2.6.13
├─ estree-walker@2.0.1
└─ vue@3.0.0-rc.10
$ electron-builder install-app-deps
  • electron-builder  version=22.7.0
  • rebuilding native dependencies  dependencies=better-sqlite3@5.4.3, fd-lock@1.1.1, integer@2.1.0, sodium-native@2.4.9, 
utp-native@2.2.1, sodium-native@3.2.0, sodium-native@3.2.0, sodium-native@3.2.0, sodium-native@3.2.0
                                    platform=linux
                                    arch=x64
  • rebuilding native dependency  name=fd-lock version=1.1.1
  • rebuilding native dependency  name=better-sqlite3 version=5.4.3
  • rebuilding native dependency  name=integer version=2.1.0
  • rebuilding native dependency  name=sodium-native version=2.4.9
  • rebuilding native dependency  name=utp-native version=2.2.1
  • rebuilding native dependency  name=sodium-native version=3.2.0
  • rebuilding native dependency  name=sodium-native version=3.2.0
  • rebuilding native dependency  name=sodium-native version=3.2.0
  • rebuilding native dependency  name=sodium-native version=3.2.0
Done in 51.95s.


(base) marco@pc01:~/webMatters/electronMatters/GGC-Electron$ yarn electron:serve
yarn run v1.22.5
warning ../package.json: No license field
$ vue-cli-service electron:serve
 INFO  Starting development server...
 ERROR  Error: Cannot find module '@vue/compiler-sfc/package.json'
Require stack:
- /home/marco/webMatters/electronMatters/GGC-Electron/node_modules/@vue/cli-service/lib/config/base.js
- /home/marco/webMatters/electronMatters/GGC-Electron/node_modules/@vue/cli-service/lib/Service.js
- /home/marco/webMatters/electronMatters/GGC-Electron/node_modules/@vue/cli-service/bin/vue-cli-service.js
Error: Cannot find module '@vue/compiler-sfc/package.json'
Require stack:
- /home/marco/webMatters/electronMatters/GGC-Electron/node_modules/@vue/cli-service/lib/config/base.js
- /home/marco/webMatters/electronMatters/GGC-Electron/node_modules/@vue/cli-service/lib/Service.js
- /home/marco/webMatters/electronMatters/GGC-Electron/node_modules/@vue/cli-service/bin/vue-cli-service.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1030:15)
    at Function.Module._load (internal/modules/cjs/loader.js:899:27)
    at Module.require (internal/modules/cjs/loader.js:1090:19)
    at require (internal/modules/cjs/helpers.js:75:18)
    at /home/marco/webMatters/electronMatters/GGC-Electron/node_modules/@vue/cli-service/lib/config/base.js:115:30
    at /home/marco/webMatters/electronMatters/GGC-Electron/node_modules/@vue/cli-service/lib/Service.js:236:40
    at Array.forEach (<anonymous>)
    at Service.resolveChainableWebpackConfig (/home/marco/webMatters/electronMatters/GGC-Electron/node_modules
/@vue/cli-service/lib/Service.js:236:26)
    at Service.resolveWebpackConfig (/home/marco/webMatters/electronMatters/GGC-Electron/node_modules/@vue/cli-service
/lib/Service.js:240:48)
    at PluginAPI.resolveWebpackConfig (/home/marco/webMatters/electronMatters/GGC-Electron/node_modules/@vue/cli-
service/lib/PluginAPI.js:132:25)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

我添加了 vue-template-compiler 但问题仍然存在..

(base) marco@pc01:~/webMatters/electronMatters/GGC-Electron$ yarn add vue-template-compiler
yarn add v1.22.5
warning ../package.json: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.3: The platform "linux" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > element-ui@2.13.2" has incorrect peer dependency "vue@^2.5.17".
warning " > vue-class-component@7.2.5" has incorrect peer dependency "vue@^2.0.0".
warning " > vuex@3.5.1" has incorrect peer dependency "vue@^2.0.0".
warning " > vuex-class@0.3.2" has incorrect peer dependency "vue@^2.5.0".
warning " > @vue/test-utils@1.0.5" has incorrect peer dependency "vue@2.x".
warning " > vue-types@2.0.1" has incorrect peer dependency "vue@^2.0.0".
[4/4] Building fresh packages...
warning "vue-template-compiler" is already in "devDependencies". Please remove existing entry first before adding it to    
"dependencies".
success Saved 1 new dependency.
info Direct dependencies
└─ vue-template-compiler@2.6.12
info All dependencies
└─ vue-template-compiler@2.6.12
$ electron-builder install-app-deps
  • electron-builder  version=22.7.0
  • rebuilding native dependencies  dependencies=better-sqlite3@5.4.3, fd-lock@1.1.1, integer@2.1.0, sodium-native@2.4.9,  
utp-native@2.2.1, sodium-native@3.2.0, sodium-native@3.2.0, sodium-native@3.2.0, sodium-native@3.2.0
                                    platform=linux
                                    arch=x64
  • rebuilding native dependency  name=fd-lock version=1.1.1
  • rebuilding native dependency  name=better-sqlite3 version=5.4.3
  • rebuilding native dependency  name=integer version=2.1.0
  • rebuilding native dependency  name=sodium-native version=2.4.9
  • rebuilding native dependency  name=utp-native version=2.2.1
  • rebuilding native dependency  name=sodium-native version=3.2.0
  • rebuilding native dependency  name=sodium-native version=3.2.0
  • rebuilding native dependency  name=sodium-native version=3.2.0
  • rebuilding native dependency  name=sodium-native version=3.2.0
Done in 49.53s.
(base) marco@pc01:~/webMatters/electronMatters/GGC-Electron$ yarn electron:serve
yarn run v1.22.5
warning ../package.json: No license field
$ vue-cli-service electron:serve
 INFO  Starting development server...
 ERROR  Error: Cannot find module '@vue/compiler-sfc/package.json'
Require stack:
- /home/marco/webMatters/electronMatters/GGC-Electron/node_modules/@vue/cli-service/lib/config/base.js
- /home/marco/webMatters/electronMatters/GGC-Electron/node_modules/@vue/cli-service/lib/Service.js
- /home/marco/webMatters/electronMatters/GGC-Electron/node_modules/@vue/cli-service/bin/vue-cli-service.js
Error: Cannot find module '@vue/compiler-sfc/package.json'
Require stack:
- /home/marco/webMatters/electronMatters/GGC-Electron/node_modules/@vue/cli-service/lib/config/base.js
- /home/marco/webMatters/electronMatters/GGC-Electron/node_modules/@vue/cli-service/lib/Service.js
- /home/marco/webMatters/electronMatters/GGC-Electron/node_modules/@vue/cli-service/bin/vue-cli-service.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1030:15)
    at Function.Module._load (internal/modules/cjs/loader.js:899:27)
    at Module.require (internal/modules/cjs/loader.js:1090:19)
    at require (internal/modules/cjs/helpers.js:75:18)
    at /home/marco/webMatters/electronMatters/GGC-Electron/node_modules/@vue/cli-service/lib/config/base.js:115:30
    at /home/marco/webMatters/electronMatters/GGC-Electron/node_modules/@vue/cli-service/lib/Service.js:236:40
    at Array.forEach (<anonymous>)
    at Service.resolveChainableWebpackConfig (/home/marco/webMatters/electronMatters/GGC-Electron/node_modules
/@vue/cli-service/lib/Service.js:236:26)
    at Service.resolveWebpackConfig (/home/marco/webMatters/electronMatters/GGC-Electron/node_modules/@vue/cli-
service/lib/Service.js:240:48)
    at PluginAPI.resolveWebpackConfig (/home/marco/webMatters/electronMatters/GGC-Electron/node_modules/@vue/cli-
service/lib/PluginAPI.js:132:25)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

如果我将 vue3 降级到 vue2，问题就会消失：

(base) marco@pc01:~/webMatters/electronMatters/GGC-Electron$ yarn add vue@2
yarn add v1.22.5
warning ../package.json: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.3: The platform "linux" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ vue@2.6.12
info All dependencies
└─ vue@2.6.12
$ electron-builder install-app-deps
  • electron-builder  version=22.7.0
  • rebuilding native dependencies  dependencies=better-sqlite3@5.4.3, fd-lock@1.1.1, integer@2.1.0, sodium-native@2.4.9,  
utp-native@2.2.1, sodium-native@3.2.0, sodium-native@3.2.0, sodium-native@3.2.0, sodium-native@3.2.0
                                    platform=linux
                                    arch=x64
  • rebuilding native dependency  name=fd-lock version=1.1.1
  • rebuilding native dependency  name=better-sqlite3 version=5.4.3
  • rebuilding native dependency  name=integer version=2.1.0
  • rebuilding native dependency  name=sodium-native version=2.4.9
  • rebuilding native dependency  name=utp-native version=2.2.1
  • rebuilding native dependency  name=sodium-native version=3.2.0
  • rebuilding native dependency  name=sodium-native version=3.2.0
  • rebuilding native dependency  name=sodium-native version=3.2.0
  • rebuilding native dependency  name=sodium-native version=3.2.0
Done in 46.79s.

(base) marco@pc01:~/webMatters/electronMatters/GGC-Electron$ yarn electron:serve
yarn run v1.22.5
warning ../package.json: No license field
$ vue-cli-service electron:serve
 INFO  Starting development server...
Starting type checking service...
Using 1 worker with 2048MB memory limit
98% after emitting CopyPlugin

 DONE  Compiled successfully in 1419ms

(base) marco@pc01:~/webMatters/electronMatters/GGC-Electron$ vue info

Environment Info:

  System:
    OS: Linux 5.4 Ubuntu 18.04.5 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
  Binaries:
    Node: 14.5.0 - ~/.nvm/versions/node/v14.5.0/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v14.5.0/bin/npm
  Browsers:
    Chrome: 85.0.4183.102
    Firefox: 80.0.1
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-helper-vue-transform-on:  1.0.0-rc.2 
    @vue/babel-plugin-jsx:  1.0.0-rc.2 
    @vue/babel-plugin-transform-vue-jsx:  1.1.2 
    @vue/babel-preset-app:  4.5.6 
    @vue/babel-preset-jsx:  1.1.2 
    @vue/babel-sugar-functional-vue:  1.1.2 
    @vue/babel-sugar-inject-h:  1.1.2 
    @vue/babel-sugar-v-model:  1.1.2 
    @vue/babel-sugar-v-on:  1.1.2 
    @vue/cli-overlay:  4.5.6 
    @vue/cli-plugin-babel: ~4.5.6 => 4.5.6 
    @vue/cli-plugin-e2e-cypress: ~4.5.6 => 4.5.6 
    @vue/cli-plugin-router: ~4.5.6 => 4.5.6 
    @vue/cli-plugin-typescript: ~4.5.6 => 4.5.6 
    @vue/cli-plugin-unit-mocha: ~4.5.6 => 4.5.6 
    @vue/cli-plugin-vuex: ~4.5.6 => 4.5.6 
    @vue/cli-service: ~4.5.6 => 4.5.6 
    @vue/cli-shared-utils:  4.5.6 
    @vue/compiler-core:  3.0.0-rc.10 
    @vue/compiler-dom:  3.0.0-rc.10 
    @vue/component-compiler-utils:  3.2.0 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/reactivity:  3.0.0-rc.10 
    @vue/runtime-core:  3.0.0-rc.10 
    @vue/runtime-dom:  3.0.0-rc.10 
    @vue/shared:  3.0.0-rc.10 
    @vue/test-utils: ^1.0.5 => 1.0.5 
    @vue/web-component-wrapper:  1.2.0 
    babel-helper-vue-jsx-merge-props:  2.0.3 
    typescript: ^4.0.2 => 4.0.2 
    vue: ^3.0.0-rc.10 => 3.0.0-rc.10 
    vue-class-component: ^7.2.5 => 7.2.5 
    vue-cli-plugin-electron-builder: ~2.0.0-rc.4 => 2.0.0-rc.4 
    vue-color: ^2.7.1 => 2.7.1 
    vue-draggable-resizable: ^2.2.0 => 2.2.0 
    vue-hot-reload-api:  2.3.4 
    vue-i18n: ^8.20.0 => 8.20.0 
    vue-loader:  15.9.3 (16.0.0-beta.7)
    vue-pdf: ^4.1.0 => 4.1.0 
    vue-property-decorator: ^9.0.0 => 9.0.0 
    vue-resize-sensor:  2.0.0 
    vue-router: ^3.2.0 => 3.3.4 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.12 => 2.6.12 
    vue-template-es2015-compiler:  1.9.1 
    vue-types: ^2.0.1 => 2.0.1 
    vuex: ^3.5.1 => 3.5.1 
    vuex-class: ^0.3.2 => 0.3.2 
  npmGlobalPackages:
    @vue/cli: 4.4.6

  electron: 10.0.0

如何解决问题？期待您的帮助

【问题讨论】：

【参考方案1】：

使其工作的命令是：

yarn add vue@next
yarn add @vue/compiler-sfc -D

注意-D 将其添加到devDependencies 而不是dependencies。

然后移除旧的依赖：

yarn remove vue-template-compiler

请注意，vue@next 当前指向 Vue 3 的最新版本，但未来可能会改变。

我在 Vue 论坛上发布了更长的解释：

https://forum.vuejs.org/t/after-upgrading-to-vue-3-cannot-find-module-vue-compiler-sfc-package-json/103424

更新：

对于使用npm 而不是yarn 的任何人，如果您将第一个单词从yarn 更改为npm，同样的3 个命令应该可以工作。

【讨论】：

【参考方案2】：

vue-template-compiler 是 vue 2 的旧包。安装 @vue/compiler-sfc https://www.npmjs.com/package/@vue/compiler-sfc 就可以了

【讨论】：

【参考方案3】：

我遇到了类似的问题，这次救了我的一个命令是：vue update... 原来我的 package.json 中有 @vue/cli-service 3... 并且需要最新版本 (4.5...)。前一个显然是在寻找错误的编译器（即不是以 sfc 结尾的那个）。

【讨论】：

【参考方案4】：

@vue/compiler-sfc npm page 上的注释说

注意：从 3.2.13+ 开始，此包作为 vue 主包的依赖项包含在内，可以作为 vue/compiler-sfc 访问。这意味着您不再需要显式安装此软件包并确保其版本与 vue 的版本匹配。只需使用主 vue/compiler-sfc 深度导入即可。

鉴于此，我刚刚将此添加到我的 package.json 并解决了问题。

        "@vue/compiler-sfc": "file:node_modules/vue/compiler-sfc",

【讨论】：

以上是关于升级到 vue 3 后：“找不到模块 '@vue/compiler-sfc/package.json'”的主要内容，如果未能解决你的问题，请参考以下文章

找不到模块“vue-xxx”的声明文件

Vue cli 3 - 找不到模块'@vue/cli-plugin-babel'

Jest+vue：“找不到模块 ....vue”

找不到模块“vue-tabulator”的声明文件

测试套件无法运行在 vue3 中使用 jest 时找不到模块'vue-template-compiler

Gulp：找不到模块'laravel-elixir-vue-2'