Error: Rule can only have one resource source (provided resource and test + include + exclude)

Question

hello I have the following error, I have an app in vuejs, it was working fine, the error appeared suddenly, reinstalled everything, clean cache and I can't find a way to solve it, I hope your help

Error: Rule can only have one resource source (provided resource and test + include + exclude) in

  "exclude": [
    null
  ],
  "use": [
    {
      "loader": "/Users/juanpablo/front-treatments/node_modules/cache-loader/dist/cjs.js",
      "options": {
        "cacheDirectory": "/Users/juanpablo/front-treatments/node_modules/.cache/babel-loader",
        "cacheIdentifier": "81fef5a6"
      },
      "ident": "clonedRuleSet-38[0].rules[0].use[0]"
    },
    {
      "loader": "/Users/juanpablo/front-treatments/node_modules/babel-loader/lib/index.js",
      "options": "undefined",
      "ident": "undefined"
    }
  ]
} ````
A complete log of this run can be found in:
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   '/Users/juanpablo/.nvm/versions/node/v12.19.0/bin/node',
1 verbose cli   '/Users/juanpablo/.nvm/versions/node/v12.19.0/bin/npm',
1 verbose cli   'run',
1 verbose cli   'serve'
1 verbose cli ]
2 info using npm@6.14.8
3 info using node@v12.19.0
4 verbose run-script [ 'preserve', 'serve', 'postserve' ]
5 info lifecycle vue-dashboard@0.1.0~preserve: vue-dashboard@0.1.0
6 info lifecycle vue-dashboard@0.1.0~serve: vue-dashboard@0.1.0
7 verbose lifecycle vue-dashboard@0.1.0~serve: unsafe-perm in lifecycle true
8 verbose lifecycle vue-dashboard@0.1.0~serve: PATH: /Users/juanpablo/.nvm/versions/node/v12.19.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/juanpablo/front-treatments/node_modules/.bin:/Users/juanpablo/.nvm/versions/node/v12.19.0/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/juanpablo/.rvm/bin
9 verbose lifecycle vue-dashboard@0.1.0~serve: CWD: /Users/juanpablo/front-treatments
10 silly lifecycle vue-dashboard@0.1.0~serve: Args: [ '-c', 'vue-cli-service serve' ]
11 silly lifecycle vue-dashboard@0.1.0~serve: Returned: code: 1  signal: null
12 info lifecycle vue-dashboard@0.1.0~serve: Failed to exec serve script
13 verbose stack Error: vue-dashboard@0.1.0 serve: `vue-cli-service serve`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/Users/juanpablo/.nvm/versions/node/v12.19.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:314:20)
13 verbose stack     at ChildProcess.<anonymous> (/Users/juanpablo/.nvm/versions/node/v12.19.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:314:20)
13 verbose stack     at maybeClose (internal/child_process.js:1021:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid vue-dashboard@0.1.0
15 verbose cwd /Users/juanpablo/front-treatments
16 verbose Darwin 19.6.0
17 verbose argv "/Users/juanpablo/.nvm/versions/node/v12.19.0/bin/node" "/Users/juanpablo/.nvm/versions/node/v12.19.0/bin/npm" "run" "serve"
18 verbose node v12.19.0
19 verbose npm  v6.14.8
20 error code ELIFECYCLE
21 error errno 1
22 error vue-dashboard@0.1.0 serve: `vue-cli-service serve`
22 error Exit status 1
23 error Failed at the vue-dashboard@0.1.0 serve script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Answer 1

These are the highest versions I could achieve on the package.json without triggering the mentioned issue. You can add Vue 2 or 3 and remaining libraries without problems.

Recommended required versions after npm audit fix

Remove 'node-sass' and add 'sass'

"dependencies": {
    "core-js": "^3.21.0"
},
"devDependencies": {
    "sass": "^1.60.0",
    "sass-loader": "^10.2.1",
    "webpack": "^5.77.0"
},

Minimum required with deprecation warnings

"dependencies": {
    "core-js": "^3.21.0"
},
"devDependencies": {
    "node-sass": "^6.0.1",
    "sass-loader": "^10.2.1",
    "webpack": "^4.46.0"
},

After that run npm update

Answer 2

For future investigators on this type of issue:

WebPack version downgrade isn't a good way to go when you for sure need ^5 version. Look carefully at what logs say! In this case it's possibly 'vue-dashboard@0.1.0' that causing the issue. Try upgrading all libraries where you find this error or stop using abandoned ones if upgrade not possible!

Answer 3

I downgraded to "webpack": "^4.45.0" and it worked. I changed the line "webpack": "^4.45.0" in package.json and after that I run the command npm update

Answer 4

For me I was using npm to install, so what I did was:

1. Delete package-lock.json
2. Delete node_modules
3. Run yarn install
4. yarn serve, and voilà!

Answer 5

Installing vue-loader solved the problem for me.

Answer 6

Deleting webpack and installing previous version worked for me!

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

Answer 7

We had this issue and downgrading webpack didn't want to work because of css-loader requiring webpack 5.

Without specifying the version css-loader would update to version 5, which doesn't support webpack 3/4.

The solution turned out to be hardcoding css-loader to version 3.6.0:

{
  ...
  "dependencies": {
    "core-js": "3.15.2",
    "vue": "^3.2.20",
    "vue-router": "^4.0.11",
    "vuex": "^4.0.2",
    "vuex-persist": "^3.1.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.14",
    "@vue/cli-plugin-router": "~4.5.14",
    "@vue/cli-plugin-vuex": "~4.5.14",
    "@vue/cli-service": "~4.5.14",
    "@vue/compiler-sfc": "^3.0.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "vue-loader": "^15.9.7",
    "vue-template-compiler": "^2.6.14"
  },
  "peerDependencies": {
    "css-loader": "3.6.0"
  }
}

The important part here is the peerDependencies part. After this make sure to delete package-lock.json and node_modules, and rerun npm i.

Answer 8

the downgrade was fundamental but then I had to downgrade sass-loader. TypeError: this.getOptions is not a function

Answer 9

Probably related to latest Node (version 15) and npm (version 7).

My use case was slightly different but I had the same problem in Dockerfile. Had to change from node:alpine to node:lts-alpine

Locally everything worked with Node LTS which uses node 14.15.0 and npm 6.14.8 but Dockerfile was using latest versions.

Answer 10

my problem was that in package.json it had "webpack": 'latest', this generated conflicts, what I did was go back to version 4.44.0 of webpack and my problem was solved

Answer 11

I encountered exactly this error today, and my solution to fix this was to revert changes in my package-lock.json.

Then a npm prune to remove unuseful packages and npm update to be up-to-date.