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

Raphael10 picture Raphael10 · Sep 12, 2020 · Viewed 8.6k times · Source

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 [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > [email protected]" has incorrect peer dependency "vue@^2.5.17".
warning " > [email protected]" has incorrect peer dependency "vue@^2.0.0".
warning " > [email protected]" has incorrect peer dependency "vue@^2.0.0".
warning " > [email protected]" has incorrect peer dependency "vue@^2.5.0".
warning " > @vue/[email protected]" has incorrect peer dependency "[email protected]".
warning " > [email protected]" has incorrect peer dependency "vue@^2.0.0".
[4/4] Building fresh packages...

success Saved lockfile.
success Saved 8 new dependencies.
info Direct dependencies
└─ [email protected]
info All dependencies
├─ @vue/[email protected]
├─ @vue/[email protected]
├─ @vue/[email protected]
├─ @vue/[email protected]
├─ @vue/[email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
$ electron-builder install-app-deps
  • electron-builder  version=22.7.0
  • rebuilding native dependencies  [email protected], [email protected], [email protected], [email protected], 
[email protected], [email protected], [email protected], [email protected], [email protected]
                                    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 [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > [email protected]" has incorrect peer dependency "vue@^2.5.17".
warning " > [email protected]" has incorrect peer dependency "vue@^2.0.0".
warning " > [email protected]" has incorrect peer dependency "vue@^2.0.0".
warning " > [email protected]" has incorrect peer dependency "vue@^2.5.0".
warning " > @vue/[email protected]" has incorrect peer dependency "[email protected]".
warning " > [email protected]" 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
└─ [email protected]
info All dependencies
└─ [email protected]
$ electron-builder install-app-deps
  • electron-builder  version=22.7.0
  • rebuilding native dependencies  [email protected], [email protected], [email protected], [email protected],  
[email protected], [email protected], [email protected], [email protected], [email protected]
                                    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 [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" 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
└─ [email protected]
info All dependencies
└─ [email protected]
$ electron-builder install-app-deps
  • electron-builder  version=22.7.0
  • rebuilding native dependencies  [email protected], [email protected], [email protected], [email protected],  
[email protected], [email protected], [email protected], [email protected], [email protected]
                                    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

Answer

skirtle picture skirtle · Oct 27, 2020

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.