Error : vue-loader requires @vue/compiler-sfc to be present in the dependency tree

Viewed 20299

I'm getting this error when I'm trying to do

npm run serve

I have tried npm update sudo npm serve. It didn't work. I also tried deleting the package-lock.json file and doing npm install after that, and that too didn't work. I also downgraded the version of the vue-loader to 15.9.2 and that also didn't work

8 Answers

Actually, you are missing the library so you just have to install it with

npm i @vue/compiler-sfc

This is a new thing in vue-loader@16. To fix this, assuming you are using Vue 2, you should downgrade:

yarn add vue-loader@15

Note that you also need vue-template-compiler, the same version as the version of Vue you are using.

you can do this and this works for me

vue-loader@15.9.7
vue-template-compiler@2.6.1

For us, the ones using VueJs 2!

Remember vue-loader@16 is only for VueJs 3.

Check the releases log here.

I downgrade to the v15.9.7. It is working fine.

If you are using Dependabot, can add the a ignore rule to avoid v16 PRs:

ignore:
  - dependency-name: "vue-loader"
    versions: ["16.x"]

Most likely, your problem has already been solved in one of the previous answers. But there is another least likely option in which you will receive a similar error.

The problem is in... node / npm versions. Possibly, some (non-LTS?) node/npm versions generates not quite correct dependency tree, and then trying to build unnecessary sources.

We got this error in one of our projects, when Jenkins built it on node v11.14.0 and npm 6.7.0. But same sources are built OK on node v8.16.0 / npm 6.4.1, node v10.18.0 / npm 6.13.4 and node v14.16.0 / npm 7.8.0. We had to update node and npm to fix this issue.

Please, use this answer only as a "last chance". No need to update/rollback your node/npm environment immediately when you see this error.

For those running into this with Vue 3 and Yarn Berry, keep in mind that Vue 3 plugins are still not compatible with Yarn 2.*, so you'd have to update vue-loader section in your .yarnrc.ymlas follows:

  vue-loader@*:
    peerDependencies:
      '@vue/compiler-sfc': '*'
      webpack: '*'

I get an error when I install it directly. but it worked when I forced it.;

npm i @vue/compiler-sfc --force

You can also solve it by the following steps:

npm update

then use

npm i @vue/compiler-sfc
Related