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

[vpasquier]

Version

4.5.8

Environment info

System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
  Binaries:
    Node: 14.14.0 - ~/.nvm/versions/node/v14.14.0/bin/node
    Yarn: Not Found
    npm: 6.14.8 - ~/.nvm/versions/node/v14.14.0/bin/npm
  Browsers:
    Chrome: 86.0.4240.80
    Edge: Not Found
    Firefox: 79.0
    Safari: 14.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1
    @vue/babel-helper-vue-transform-on:  1.0.0-rc.2
    @vue/babel-plugin-jsx:  1.0.0-rc.3
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  4.5.8
    @vue/babel-preset-jsx:  1.2.3
    @vue/babel-sugar-composition-api-inject-h:  1.2.1
    @vue/babel-sugar-composition-api-render-instance:  1.2.1
    @vue/babel-sugar-functional-vue:  1.2.2
    @vue/babel-sugar-inject-h:  1.2.2
    @vue/babel-sugar-v-model:  1.2.3
    @vue/babel-sugar-v-on:  1.2.3
    @vue/cli: ^4.5.8 => 4.5.8
    @vue/cli-overlay:  4.5.8
    @vue/cli-plugin-babel: ^4.5.8 => 4.5.8
    @vue/cli-plugin-eslint: ^4.5.8 => 4.5.8
    @vue/cli-plugin-router:  4.5.8
    @vue/cli-plugin-vuex:  4.5.8
    @vue/cli-service: ^4.5.8 => 4.5.8
    @vue/cli-shared-utils:  4.5.8
    @vue/cli-ui:  4.5.8
    @vue/cli-ui-addon-webpack:  4.5.8
    @vue/cli-ui-addon-widgets:  4.5.8
    @vue/compiler-core:  3.0.1
    @vue/compiler-dom:  3.0.1
    @vue/compiler-sfc:  3.0.1
    @vue/compiler-ssr:  3.0.1
    @vue/component-compiler-utils:  3.2.0
    @vue/preload-webpack-plugin:  1.1.2
    @vue/reactivity:  3.0.1
    @vue/runtime-core:  3.0.1
    @vue/runtime-dom:  3.0.1
    @vue/shared:  3.0.1
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^7.1.0 => 7.1.0
    typescript:  3.9.7
    vue: ^2.6.10 => 2.6.12 (3.0.1)
    vue-cli-plugin-apollo:  0.21.3
    vue-codemod:  0.0.4
    vue-eslint-parser:  7.1.1
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.9.3 (16.0.0-beta.8)
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.10 => 2.6.12
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

• npm install
• vue-cli-service build or vue-cli-service serve

What is expected?

To be built correctly

What is actually happening?

Error occurs:

Error: Rule can only have one resource source (provided resource and test   include   exclude) in {
  "exclude": [
    null
  ],
  "use": [
    {
      "loader": "./node_modules/cache-loader/dist/cjs.js",
      "options": {
        "cacheDirectory": "./node_modules/.cache/babel-loader",
        "cacheIdentifier": "d7e2daba"
      },
      "ident": "clonedRuleSet-38[0].rules[0].use[0]"
    },
    {
      "loader": "/Users/vp/nuxeo/nuxeo-insight-ui/node_modules/babel-loader/lib/index.js",
      "options": "undefined",
      "ident": "undefined"
    }
  ]
}

[sodatea]

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!

[vpasquier]

I will create a repository with this very simple package.json - as you can see, its with the default behavior of the vue cli... nothing customized at all.

[vpasquier]

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.

[GTorreil]

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

[Hectix]

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

[RenanMartorelli]

I have exactly the same problem

[AlexanderYW]

I had the same issues using Node version 15, downgrading to Node version 14 LTS worked for me.

Hope this helps :)

[ieshan]

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)

[alexcroox]

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

[holtwick]

Did anybody find a workaround?

[RenanMartorelli]

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