Error: Rule can only have one resource source when using webpack-stream

[marekdedic]

Hi,
I've recently encountered this very weird error after updating from webpack v4 to v5.

$ gulp build
[18:09:32] Using gulpfile ~/shared-drive-mover/gulpfile.js
[18:09:32] Starting 'build'...
[18:09:33] 'build' errored after 349 ms
[18:09:33] Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
  "exclude": {},
  "use": [
    {
      "loader": "ts-loader",
      "options": {
        "appendTsSuffixTo": [
          {}
        ]
      },
      "ident": "clonedRuleSet-1[0].rules[0]"
    }
  ]
}
    at checkResourceSource (/home/user/shared-drive-mover/node_modules/webpack-stream/node_modules/webpack/lib/RuleSet.js:167:11)
    at Function.normalizeRule (/home/user/shared-drive-mover/node_modules/webpack-stream/node_modules/webpack/lib/RuleSet.js:198:4)
    at /home/user/shared-drive-mover/node_modules/webpack-stream/node_modules/webpack/lib/RuleSet.js:110:20
    at Array.map (<anonymous>)
    at Function.normalizeRules (/home/user/shared-drive-mover/node_modules/webpack-stream/node_modules/webpack/lib/RuleSet.js:109:17)
    at new RuleSet (/home/user/shared-drive-mover/node_modules/webpack-stream/node_modules/webpack/lib/RuleSet.js:104:24)
    at new NormalModuleFactory (/home/user/shared-drive-mover/node_modules/webpack-stream/node_modules/webpack/lib/NormalModuleFactory.js:115:18)
    at Compiler.createNormalModuleFactory (/home/user/shared-drive-mover/node_modules/webpack-stream/node_modules/webpack/lib/Compiler.js:636:31)
    at Compiler.newCompilationParams (/home/user/shared-drive-mover/node_modules/webpack-stream/node_modules/webpack/lib/Compiler.js:653:30)
    at Compiler.compile (/home/user/shared-drive-mover/node_modules/webpack-stream/node_modules/webpack/lib/Compiler.js:661:23)
    at /home/user/shared-drive-mover/node_modules/webpack-stream/node_modules/webpack/lib/Compiler.js:321:11
    at Compiler.readRecords (/home/user/shared-drive-mover/node_modules/webpack-stream/node_modules/webpack/lib/Compiler.js:529:11)
    at /home/user/shared-drive-mover/node_modules/webpack-stream/node_modules/webpack/lib/Compiler.js:318:10
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/user/shared-drive-mover/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/home/user/shared-drive-mover/node_modules/tapable/lib/Hook.js:154:20)
    at /home/user/shared-drive-mover/node_modules/webpack-stream/node_modules/webpack/lib/Compiler.js:315:19

However, calling webpack directly works just fine:

$ webpack
asset index.js 21 bytes [compared for emit] [minimized] (name: index)
./index.ts 22 bytes [built] [code generated]
webpack 5.21.2 compiled successfully in 1406 ms

I've tried to clean up the repo and make it into a minimal repro, here it is: https://github.com/skaut/shared-drive-mover/tree/webpack-5-issue-repro

This issue only happens to me with webpack@v5, webpack-stream, vue and typescript. Removing any of these makes the issue disappear. I honestly don't know which package is the culprit but since there is a clear difference between using and not using this one, that'd be my most probable guess.

[shama]

It looks like others have fixed it by deleting their node_modules and npm i again: https://stackoverflow.com/questions/64373393/error-rule-can-only-have-one-resource-source-provided-resource-and-test-incl

So maybe some kind of cached module the build doesn't like?

[marekdedic]

Hi,
thanks, unfortunately, 've already tried to clean the cache, remove node_modules and npm i again... No change.

Actually, many people in that thread recommend downgrading to webpack@v4 - that's not a solution, just a temporary workaround (which I am using atm).

[shama]

@marekdedic Ah ok, I'm not sure what the solution is then. I would try searching that error on https://github.com/webpack/webpack as the error originates from webpack directly.

[marekdedic]

Ok, I submitted webpack/webpack#12640 - I am not sure where the issue lies, let's try and get to the bottom of this 🙂