search

vuejs / vue-cli

🛠️ webpack-based tooling for Vue.js Development
https://cli.vuejs.org/
MIT License
29.78k stars 6.33k forks source link

"Rule can only have one resource source" failure occurs when running server or building for production #5986

Open vpasquier opened 3 years ago

vpasquier commented 3 years ago

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

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

davidurco commented 3 years ago

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

RenanMartorelli commented 3 years ago

I have exactly the same problem

AlexanderYW commented 3 years ago

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

Hope this helps :)

ieshan commented 3 years ago

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 commented 3 years ago

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

holtwick commented 3 years ago

Did anybody find a workaround?

RenanMartorelli commented 3 years ago

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

MichaelSp commented 3 years ago

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

ch4dwick commented 3 years ago

4.46.0 doesn't work. I get the same error again. Thanks @MichaelSp. Looks like that's the barrier for this version.

diglopes commented 3 years ago

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

Worked for me!

EO2875 commented 3 years ago

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

divinespear commented 3 years ago

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.

terryyyyyy commented 3 years ago

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.

So,how to solve this issue if I really want to use webpack 5?

jameswragg commented 3 years ago

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

axetroy commented 3 years ago

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

ameinhardt commented 3 years ago

I guess that's because vue-loader/plugin-webpack5 is using 'resource/resourceQuery' but cli-plugin-babel 'exclude' on the same (.m?jsx?) rule. @sodatea: Could vue-loader and cli-plugin-babel use a common interface or should they create two rules?

YinchenWang commented 3 years ago

totally the same err, I've no idea how to fix it

sodatea commented 3 years ago

Could you provide a reproduction repo, please? Because I cannot reproduce this error on my local projects.

fangbinwei commented 3 years ago

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.

It seems this issue occurs when webpack5 uses thevue-loader-v15/lib/plugin-webpack4.js

https://github.com/vuejs/vue-loader/blob/b53ae44e4b9958db290f5918248071e9d2445d38/lib/plugin-webpack4.js#L125-L128

I can reproduce the issue by this way, by the way, I am using npm@6

npx @vue/cli create test_project --packageManager npm # (select vue2, babel/eslint-plugin)
npm i @vue/cli-service@5.0.0-alpha.6 -D
npm run serve

directory tree

node_modules
├───webpack@4 (dependeny of @vue/vue-cli-plugin-babel and @vue/cli-plugin-eslint
├───@vue/cli-service
│   ├───webpack@5
├───vue-loader-v15

https://github.com/vuejs/vue-cli/blob/bef2375326aa4274c3cb83809b1f60e133e46c7c/packages/%40vue/cli-plugin-babel/package.json#L29

maybe webpack should be listed in peerDependencies in @vue/cli-plugin-*. Also can fix in vue-loader-v15/lib/plugin-webpack4.js @sodatea

sodatea commented 3 years ago

There's already a peer dependency requirement from the cli plugin: https://github.com/vuejs/vue-cli/blob/9ea68a8a46ec28a78f94b25e92fb5075dc70af10/packages/%40vue/cli-plugin-babel/package.json#L31-L33

azizrbii90 commented 3 years ago

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

axetroy commented 3 years ago

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

am... This did not work for me...

axetroy commented 3 years ago

My situation is to use the monorepo repository

.
├── Dockerfile.docs
├── JenkinsShellDocs.sh
├── LICENSE
├── README.md
├── commitlint.config.js
├── docs
│   ├── README.md
│   ├── _404.md
│   ├── _coverpage.md
│   ├── _navbar.md
│   ├── _sidebar.md
│   ├── design
│   ├── development
│   ├── development.md
│   ├── files.md
│   ├── files_template_uni_app.md
│   ├── files_template_vue2.md
│   ├── files_template_vue3.md
│   ├── index.html
│   ├── publish
│   ├── quick-start.md
│   ├── standard
│   └── strut.md
├── lerna.json
├── nginx.conf
├── package.json
├── packages
│   ├── create-app
│   ├── http-client
│   ├── inner-css
│   ├── swagger-ts
│   ├── utils
│   └── vue2-component
├── script
│   ├── staged-lint
│   └── workspace-cmd
├── tsconfig.base.json
├── vetur.config.js
└── yarn.lock

create-app have vue-cli@4 deps

vue2-component has webpack@5 deps. The node_modules between them are independent(DID NOT SHARE node_modules). So they should not affect each other.

But when I tried it, when I lowered webpack@5 to webpack@4, everything was back to normal again.

live680g commented 3 years ago

4.46.0 doesn't work. I get the same error again. Thanks @MichaelSp. Looks like that's the barrier for this version.

solved problem in this way, thx

theneverstill commented 3 years ago

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.

kayateia commented 3 years ago

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.

gmisiurny commented 3 years ago

I had the same issue: npm rebuild node-sass made the job !

ghost commented 3 years ago

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

ghonchesefidi commented 3 years ago

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

mclxly commented 3 years ago 
rm -rf node_modules
npm install webpack@^4.0.0 --save-dev
npm i

fix error~

eaardal commented 2 years ago

I use stylus and not sass and have the same problem. I found that it occurs when I use stylus-loader v5.0.0 or greater. I submitted an issue in their repo https://github.com/webpack-contrib/stylus-loader/issues/320

brondavies commented 2 years ago

Geez, is this issue really this old? 😱 I found that source-map-loader 2.0+ also requires webpack 5 which was mentioned earlier that it has to be downgraded to fix this issue. Use "source-map-loader": "1.1.3" in this case

zawadsoon commented 2 years ago

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.

fjobeir commented 2 years ago

WARN webpack@5.47.1 is installed but ^4.46.0 is expected WARN sass-loader@12.1.0 is installed but ^10.1.1 is expected

Uninstalling webpack and sass-loader then installing the mentioned versions was enough for me

OkilSaber commented 2 years ago

Hello I have a problem. I removed the node_modules folder and package-lock.json file. I ran npm uninstall webpack then npm install webpack@^4.0.0 --save-dev but i get this error : image

syldman commented 2 years ago

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.

brunarafaela commented 2 years ago

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

rowild commented 2 years ago

I also observe that errors occur with the mentioned dependencies. However, when i use yarn instead of npm, the project works fine... there is something about yarn that seems to be just better...

AbrahamBrookes commented 2 years ago

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.

RenanRossiDias commented 2 years ago

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.

ajslater commented 2 years ago

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.

PeteJStewart commented 2 years ago

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

shadow7412 commented 2 years ago

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.

Mirjalol9797 commented 2 years ago

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

jakeflorentine commented 2 years ago

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

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

sred907 commented 2 years ago

Any update on this front without degrading webpack?