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

Javascriptvue.jsWebpackNode Modules

Javascript Problem Overview


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 ]

Javascript Solutions


Solution 1 - Javascript

Deleting webpack and installing previous version worked for me!

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

Solution 2 - Javascript

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.

Solution 3 - Javascript

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

Solution 4 - Javascript

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

Solution 5 - Javascript

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.

Solution 6 - Javascript

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.

Solution 7 - Javascript

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.

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

After that run npm update

Solution 8 - Javascript

the downgrade was fundamental but then I had to downgrade sass-loader. https://stackoverflow.com/questions/66082397/typeerror-this-getoptions-is-not-a-function

Solution 9 - Javascript

Installing vue-loader solved the problem for me.

Solution 10 - Javascript

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Ă !

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJuan Pablo Gomez ZapataView Question on Stackoverflow
Solution 1 - JavascriptCvincentView Answer on Stackoverflow
Solution 2 - JavascriptrcpersoView Answer on Stackoverflow
Solution 3 - JavascriptDennyView Answer on Stackoverflow
Solution 4 - JavascriptJuan Pablo Gomez ZapataView Answer on Stackoverflow
Solution 5 - JavascriptE.MView Answer on Stackoverflow
Solution 6 - Javascripth2oooooooView Answer on Stackoverflow
Solution 7 - JavascriptHeroselohimView Answer on Stackoverflow
Solution 8 - JavascriptTemidoRochaView Answer on Stackoverflow
Solution 9 - JavascriptEvans_boView Answer on Stackoverflow
Solution 10 - JavascriptMoon DaysView Answer on Stackoverflow