After upgrading to vue 3 : "Cannot find module '@vue/compiler-sfc/package.json' "

user_14175733 0
Viewed 43228

After upgrading to vue 3 :
yarn add vue@next

I get this error: "Cannot find module '@vue/compiler-sfc/package.json" when executing yarn electron:serve

(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.

I added vue-template-compiler but the problem persists..

(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.

If I downgrade vue3 to vue2 the problem disappears:

(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

How to solve the problem? Looking forward to your kind help

vuejs3 upgrade
7 Answers

The commands to get it working are:

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

Note the -D to add it to the devDependencies rather than the dependencies.

Then to remove the old dependency:

yarn remove vue-template-compiler

Note that vue@next currently points at the latest release of Vue 3 but that will likely change in future.

I posted a longer explanation on the Vue forums:

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

Update:

For anyone using npm rather than yarn, the same 3 commands should work if you change the first word from yarn to npm.

user_85835630
tm_lv_466170

In my case the vue-loader version was updated to ^17.X and i had to downgrade to ^15.x.x

user_102145410

I had a similar issue, the one command that saved me this time was:
vue update...
It turned out that I had @vue/cli-service 3... in my package.json and needed the latest version (4.5...). The previous one was looking for the wrong compiler apparently (ie. not the one ending with sfc).

user_140084470

The note on the @vue/compiler-sfc npm page says

Note: as of 3.2.13+, this package is included as a dependency of the main vue package and can be accessed as vue/compiler-sfc. This means you no longer need to explicitly install this package and ensure its version match that of vue's. Just use the main vue/compiler-sfc deep import instead.

In light of that, I just added this to my package.json and it fixed the issue.

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

If your vue version is higher than 3.2.13 then check your project/node_modules/@vue/compiler-sfc, if path exists then you can add this line in package.json:

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

This config tells npm to look for package.json in this path, since when you install vue the compiler-sfc will also be installed, you are good to go.

user_178376640

i ran into a similar problem and found out it came from the name i gave my vue project after running npm init vue@latest. So avoid using names that refer directly to vue's version, etc... and it might just do the trick

user_199621010
Related