Login/Register
After upgrading to vue 3 : "Cannot find module '@vue/compiler-sfc/package.json' "
Asked Answered
upgradevuejs3
H

7

37

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

Haig answered 12/9, 2020 at 17:47 Comment(1)
I'm a novice and don't want to provide a wrong answer, but what just worked for me is npm i [email protected] (npmjs.com/package/vue/v/3.2.29) and then npm run serve – Hydromel
C
44

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.

Clevie answered 27/10, 2020 at 3:48 Comment(0)
P
19

vue-template-compiler is the old package for vue 2. Install @vue/compiler-sfc https://www.npmjs.com/package/@vue/compiler-sfc and you should be good to go

Politico answered 21/9, 2020 at 17:38 Comment(0)
M
4

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

Mediant answered 13/4, 2022 at 7:38 Comment(0)
B
1

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.

Bergquist answered 5/1, 2022 at 5:40 Comment(0)
U
0

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

Urata answered 12/6, 2021 at 10:1 Comment(0)
R
0

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",
Repellent answered 21/12, 2021 at 18:32 Comment(1)
This didn't work for me, but afterwards I tried npm i [email protected] (npmjs.com/package/vue/v/3.2.29) and then npm run serve and it fixed the issue. I'm a novice and can't explain why it worked, so I'm not submitting as an official answer. – Hydromel
C
0

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

Conjugated answered 13/9, 2022 at 0:2 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.