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

Question

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 1

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.