vue-cli: "Rule can only have one resource source" failure occurs when running server or building for production

Can people stop posting the “solution” of not using webpack 5? It’s not that new anymore, and many packages require it.

Vue needs to support this.

I can confirm that downgrading to "webpack": "^4.45.0" works

It can be resolved with the following commands npm uninstall sass-loader npm install sass-loader@^10.1.1 --save-dev If the version of webpack is 5 then downgrade to any version between 4 and 5 npm uninstall webpack npm install webpack@^4.0.0 --save-dev

For me this issue appeared after updating my sass-loader. Fixed by downgrading to "sass-loader": "^10.1.1"

The problem still exists, and that’s really infuriating. The solution is NOT to downgrade to a lower version of webpack or whatever package. One should be able to use it with node 16 (indeed, if you want to use this version, webpack 5 is required by some other packages).

This is getting ridiculous. I also have this problem. I just reverted old packege-lock.json and it works.

Why It was possible to properly install dependencies few weeks ago and now it is not possible? I even did’t change anything!

It’s insane how fragile our dependencies are.

je veux migrer du version 4 à 5 , donc la solution proposer au dessus ne me convient pas, y a t il une autre solution ?

It’s not a node version issue but a webpack v5 issue

npm uninstall webpack npm install webpack@^4.0.0 --save-dev

Is downgrading to Webpack 4.x.x a good solution?

For what it’s worth, I was having the same issue. Latest npm 7 handles peer dependencies in a different way than npm 6.

Following some advice in https://github.com/nuxt/nuxt.js/issues/8277 I ran npm i --legacy-peer-deps which drops webpack 5 from my package-lock.json and the build now works as expected.

This error raises by combination of @vue/cli-plugin-babel and vue-loader’s plugin-webpack5.js. webpack 5 looks reject combining test / include / exclude with resource, and plugin-webpack5.js always add default resource function.

Here is the project example (sorry its dirty but simple) - https://github.com/vpasquier/vuejscli-repro

The problem is related to webpack 5 (https://github.com/vpasquier/vuejscli-repro/blob/master/my-project/package.json#L20)

This is the only thing i’ve added as dependency from the default vuejs bootstrap. I’ve reverted my project to 4.x.x and it works well. They have released recently.

It can be resolved with the following commands npm uninstall sass-loader npm install sass-loader@^10.1.1 --save-dev If the version of webpack is 5 then downgrade to any version between 4 and 5 npm uninstall webpack npm install webpack@^4.0.0 --save-dev

This worked well for me on vue3 and TypeScript setup

Dialing it back to "sass-loader": "^10.1.1" in package.json worked for me. I appear to be on webpack@4.46.0 already.

Just confirmed this with an actual project. It works with Webpack 4.44.2 but fails with anything 5.x.x

npm uninstall webpack npm install webpack@^4.0.0 --save-dev

This doesn’t solve the described issue, is only a bandaid

This is getting ridiculous. I also have this problem. I just reverted old packege-lock.json and it works.

Why It was possible to properly install dependencies few weeks ago and now it is not possible? I even did’t change anything!

It’s insane how fragile our dependencies are.

Totally agree with @zawadsoon. It is incredible how we are overexposed to dependencies. From a project up and running to a project full of unknown errors due to 3rd party libs.

None of those actually worked for me.

But Vue should support Webpack 5.x or at least provide instructions on how to configure Webpack 5.x

Just in case anyone has the issue I had with this, I thought I would share.

Basically for me, the problem was due to one package I was using having a dependancy on css-loader, which since version 6, has moved to using webpack 5. I suspect this will keep happening while packages update to using webpack 5, so it may be a different package for you.

I could see the problem when trying to add webpack 4.46.0 as a dev dependancy npm i webpack@4.46.0 --save-dev I then checked the version css-loader switch to using webpack 5 and then included the version before as a dev dependancy. npm i css-loader@5.2.7 --save-dev. I could then also include webpack 4 as a dev depenadancy and everything was working again.

What a nightmare!! Hope that helps someone!!

Updating vue/cli* to >= 5.0.0-rc.1 solves this issue can i can now use webpack 5 and sass-loader > 10.2 The alternative is to downgrade to webpack 4 and sass-loader 10.2 Thanks, syldman.

It can be resolved with the following commands npm uninstall sass-loader npm install sass-loader@^10.1.1 --save-dev If the version of webpack is 5 then downgrade to any version between 4 and 5 npm uninstall webpack npm install webpack@^4.0.0 --save-dev

This worked for me. Thank you

all solution above not works for me.

Mine is the monorepo repository. After webpack (4/5) is referenced in a package, the CLI cannot be started, and these two packages must be deleted.

At first I thought it was a webpack 5 problem until I switched back to webpack 4, the problem still existed.

For me, vue-cli is really a black box

I found a solution but in my case I believe it was somewhat related to the Quasar Framework dependencies my project was using. But here are some steps that helped me out:

I started using Node v12 (which is recommended by many frameworks as it is the last LTS version released) and forced the project to use “core-js” dependency in version 3, I’ve also seen some folks saying that version 2 also worked for them, but for me it only worked on 3.

I discovered that my problem specifically was related to the Quasar Framework getting updated to v2, and that there are plenty of modifications one has to do to make the project work correctly. If you are using Quasar, I highly recommend you to check this version upgrade tutorial: https://quasar.dev/quasar-cli/app-upgrade-guide

@shadow7412 it shouldn’t matter which version I’m using. Vue should use whichever version it wants

• my-project
  • dependencies
    • webpack 5.x.x
    • vue
      • webpack 4.x.x

I also have this issue in a laravel-mix powered vue project. Getting all kinds of dependency errors and it looks like laravel-mix is doing something.

In my case the issue was with the cache-loader that couldn’t work along webpack v5 and vue/cli v4.x requires cache-loader. vue/cli v5 moved to webpack 5 and vue/cli v5.0.0-beta.3 dropped requirement for cache-loader. So updating both webpack and vue/cli to v5 solved the issue. Now everything is working fine.

Is downgrading to Webpack 4.x.x a good solution?

Worked for me!

Having the same issue, moving from Node version 15 to 14 didn’t work for me. Here is the exception I am getting

Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
  "exclude": [
    null
  ],
  "use": [
    {
      "loader": "~/node_modules/@vue/cli-plugin-babel/node_modules/cache-loader/dist/cjs.js",
      "options": {
        "cacheDirectory": "~/node_modules/.cache/babel-loader",
        "cacheIdentifier": "a8ec5012"
      },
      "ident": "clonedRuleSet-38[0].rules[0].use[0]"
    },
    {
      "loader": "~/node_modules/babel-loader/lib/index.js",
      "options": "undefined",
      "ident": "undefined"
    }
  ]
}
    at checkResourceSource (~/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:167:11)
    at Function.normalizeRule (~/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:198:4)
    at ~/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:110:20
    at Array.map (<anonymous>)
    at Function.normalizeRules (~/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:109:17)
    at new RuleSet (~/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:104:24)
    at new NormalModuleFactory (~/node_modules/@vue/cli-service/node_modules/webpack/lib/NormalModuleFactory.js:115:18)
    at Compiler.createNormalModuleFactory (~/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:636:31)
    at Compiler.newCompilationParams (~/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:653:30)
    at Compiler.compile (~/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:661:23)
    at ~/node_modules/@vue/cli-service/node_modules/webpack/lib/Watching.js:77:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (~/node_modules/@vue/cli-service/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1)
    at AsyncSeriesHook.lazyCompileHook (~/node_modules/@vue/cli-service/node_modules/tapable/lib/Hook.js:154:20)
    at Watching._go (~/node_modules/@vue/cli-service/node_modules/webpack/lib/Watching.js:41:32)
    at ~/node_modules/@vue/cli-service/node_modules/webpack/lib/Watching.js:33:9
    at Compiler.readRecords (~/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:529:11)

Thanks for submitting this issue! Due to our limited time, we ask you to include a reproduction link to a minimal full reproduction of your problem (for example in a GitHub repository) so we can find what is causing the issue. Thank you for your understanding!