Cannot start freshly generated vue app due to "Rule can only have one resource source" error #268

AlexJWayne · 2022-07-15T22:44:08Z

Current Behavior

A cryptic error is thrown when trying to serve the app without modification from the generator.

nx run my-app:serve

Produces this output:

 >  NX   Rule can only have one resource source (provided resource and test + include + exclude) in {

     "exclude": [
       null
     ],
     "use": [
       {
         "loader": "/Users/...snipped.../vue-test/node_modules/cache-loader/dist/cjs.js",
         "options": {
           "cacheDirectory": "/Users/...snipped.../vue-test/node_modules/.cache/babel-loader",
           "cacheIdentifier": "7e933023"
         },
         "ident": "clonedRuleSet-39.use[0]"
       },
       {
         "loader": "/Users/...snipped.../vue-test/node_modules/babel-loader/lib/index.js",
         "options": {
           "configFile": "/Users/...snipped.../vue-test/apps/my-app/babel.config.js"
         },
         "ident": "clonedRuleSet-39.use[1]"
       }
     ]
   }

Expected Behavior

nx serve my-app should serve the application

Steps to Reproduce

I ran the followed commands to create a totally blank nx workspace and create a blank vue app.

npx create-nx-workspace

    ✔ Workspace name (e.g., org name)     · vue-test
    ✔ What to create in the new workspace · apps
    ✔ Set up distributed caching using Nx Cloud (It's free and doesn't require registration.) · No

npm install @nrwl/cypress @nrwl/jest @nrwl/linter --save-dev
npm install @nx-plus/vue --save-dev

nx g @nx-plus/vue:app

    ✔ What name would you like to use? · my-app
    ✔ Which style format would you like to use? · scss
    ✔ Would you like to configure routing for this application? (y/N) · false
    ✔ Which version of Vue.js would you like to use? · 2
    ✔ Use Babel alongside TypeScript? (y/N) · true

nx run my-app:serve

I put the result of that in this github repo: https://github.com/AlexJWayne/vue-test

I also tried other configurations of the genrator (vue3, not using babel, plain css) but got the same result.

Failure Logs

Full error with verbose logging:

➜ nx serve my-app --verbose

> nx run my-app:serve --verbose=true

 INFO  Starting development server...

 >  NX   Rule can only have one resource source (provided resource and test + include + exclude) in {

     "exclude": [
       null
     ],
     "use": [
       {
         "loader": "/Users/...snipped.../vue-test/node_modules/cache-loader/dist/cjs.js",
         "options": {
           "cacheDirectory": "/Users/...snipped.../vue-test/node_modules/.cache/babel-loader",
           "cacheIdentifier": "7e933023"
         },
         "ident": "clonedRuleSet-39.use[0]"
       },
       {
         "loader": "/Users/...snipped.../vue-test/node_modules/babel-loader/lib/index.js",
         "options": {
           "configFile": "/Users/...snipped.../vue-test/apps/my-app/babel.config.js"
         },
         "ident": "clonedRuleSet-39.use[1]"
       }
     ]
   }

Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
  "exclude": [
    null
  ],
  "use": [
    {
      "loader": "/Users/...snipped.../vue-test/node_modules/cache-loader/dist/cjs.js",
      "options": {
        "cacheDirectory": "/Users/...snipped.../vue-test/node_modules/.cache/babel-loader",
        "cacheIdentifier": "7e933023"
      },
      "ident": "clonedRuleSet-39.use[0]"
    },
    {
      "loader": "/Users/...snipped.../vue-test/node_modules/babel-loader/lib/index.js",
      "options": {
        "configFile": "/Users/...snipped.../vue-test/apps/my-app/babel.config.js"
      },
      "ident": "clonedRuleSet-39.use[1]"
    }
  ]
}
    at checkResourceSource (/Users/...snipped.../vue-test/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:167:11)
    at Function.normalizeRule (/Users/...snipped.../vue-test/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:198:4)
    at /Users/...snipped.../vue-test/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:110:20
    at Array.map (<anonymous>)
    at Function.normalizeRules (/Users/...snipped.../vue-test/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:109:17)
    at new RuleSet (/Users/...snipped.../vue-test/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:104:24)
    at new NormalModuleFactory (/Users/...snipped.../vue-test/node_modules/@vue/cli-service/node_modules/webpack/lib/NormalModuleFactory.js:115:18)
    at Compiler.createNormalModuleFactory (/Users/...snipped.../vue-test/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:636:31)
    at Compiler.newCompilationParams (/Users/...snipped.../vue-test/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:653:30)
    at Compiler.compile (/Users/...snipped.../vue-test/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:661:23)
    at /Users/...snipped.../vue-test/node_modules/@vue/cli-service/node_modules/webpack/lib/Watching.js:77:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/...snipped.../vue-test/node_modules/@vue/cli-service/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:33:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/...snipped.../vue-test/node_modules/@vue/cli-service/node_modules/tapable/lib/Hook.js:154:20)
    at Watching._go (/Users/...snipped.../vue-test/node_modules/@vue/cli-service/node_modules/webpack/lib/Watching.js:41:32)
    at /Users/...snipped.../vue-test/node_modules/@vue/cli-service/node_modules/webpack/lib/Watching.js:33:9
    at Compiler.readRecords (/Users/...snipped.../vue-test/node_modules/@vue/cli-service/node_modules/webpack/lib/Compiler.js:529:11)

 —————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 >  NX   Running target "my-app:serve" failed

   Failed tasks:
   
   - my-app:serve
   
   Hint: run the command with --verbose for more details.

Environment

Plugin name and version: @nx-plus/vue@4.1.0

➜ nx report

 >  NX   Report complete - copy this into the issue template

   Node : 16.15.0
   OS   : darwin x64
   npm  : 8.5.5
   
   nx : 14.4.2
   @nrwl/angular : Not Found
   @nrwl/cypress : 14.4.2
   @nrwl/detox : Not Found
   @nrwl/devkit : 14.4.2
   @nrwl/eslint-plugin-nx : 14.4.2
   @nrwl/express : Not Found
   @nrwl/jest : 14.4.2
   @nrwl/js : Not Found
   @nrwl/linter : 14.4.2
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : Not Found
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : Not Found
   @nrwl/web : Not Found
   @nrwl/workspace : 14.4.2
   typescript : 4.7.4
   ---------------------------------------
   Community plugins:
         @nx-plus/vue: 14.1.0

The text was updated successfully, but these errors were encountered:

mgray88 · 2022-07-21T13:37:18Z

Also experiencing this. This makes the project essentially unusable. @ZachJW34 any input?

mgray88 · 2022-07-21T13:42:58Z

@AlexJWayne Playing around I managed to get it to work. I ran the migrate command (nx migrate @nx-plus/nuxt), then the npm install. After which nx serve my-app worked. Not sure if simply running npm install would have worked, or if this is a documentation issue

ZachJW34 · 2022-07-24T15:56:17Z

@AlexJWayne are you still experiencing this issue? I wasn't able to reproduce this and the reproduction you provided gives me a "Page Not Found". Can you post another reproduction?

@mgray88 Vue 2.7 had some webpack changes, so maybe the npm i bumped it and it resolved itself.

sevspo · 2022-08-18T18:27:31Z

Same issue, and the steps above did not work 🤨

AlexJWayne · 2022-08-21T07:57:11Z

@ZachJW34 I apologize that I missed the notifications on this! And I'm sorry the repo was private. I've fixed that now and you should be able to see the repo.

nx migrate @nx-plus/nuxt does indeed seem to fix things, which seems weird. So thanks for that @mgray88

Still, I would expect the out of the box virgin repo to work.

AlexJWayne · 2022-08-22T22:11:14Z

I may have spoke too soon. I was able to get it working with a fresh install, but in an existing monorepo that nuxt migration doesn't help.

AlexJWayne · 2022-08-22T22:56:01Z

I think The culprit seems to be webpack v5. Rolling back to webpack v4.43.0 seems to work, but that breaks other projects.

According to https://nx.dev/guides/webpack-5:

Starting in Nx 13, we only support Webpack 5, which is automatically enabled for all workspaces.

Which leads me here: #225 :(

gritsenko-konstantin · 2022-09-05T12:16:29Z

repeated steps from issue message

having same error.

`
$ nx run my-app:serve

nx run my-app:serve

INFO Starting development server...

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

 "exclude": [
   null
 ],
 "use": [
   {
     "loader": "/home/.../research/nx/frontend/vue-test/node_modules/cache-loader/dist/cjs.js",
     "options": {
       "cacheDirectory": "/home/.../research/nx/frontend/vue-test/node_modules/.cache/babel-loader",
       "cacheIdentifier": "1979b738"
     },
     "ident": "clonedRuleSet-39.use[0]"
   },
   {
     "loader": "/home/.../research/nx/frontend/vue-test/node_modules/babel-loader/lib/index.js",
     "options": {
       "configFile": "/home/.../research/nx/frontend/vue-test/apps/my-app/babel.config.js"
     },
     "ident": "clonedRuleSet-39.use[1]"
   }
 ]

}
Pass --verbose to see the stacktrace.

————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

NX Running target "my-app:serve" failed

Failed tasks:

my-app:serve

Hint: run the command with --verbose for more details.

$ nx report
nx report

NX Report complete - copy this into the issue template

Node : 14.20.0
OS : linux x64
npm : 6.14.17

nx : 14.6.4
@nrwl/angular : Not Found
@nrwl/cypress : 14.6.4
@nrwl/detox : Not Found
@nrwl/devkit : 14.6.4
@nrwl/eslint-plugin-nx : 14.6.4
@nrwl/express : Not Found
@nrwl/jest : 14.6.4
@nrwl/js : Not Found
@nrwl/linter : 14.6.4
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : Not Found
@nrwl/nx-cloud : Not Found
@nrwl/nx-plugin : Not Found
@nrwl/react : Not Found
@nrwl/react-native : Not Found
@nrwl/schematics : Not Found
@nrwl/storybook : Not Found
@nrwl/web : Not Found
@nrwl/workspace : 14.6.4
typescript : 4.7.4

Local workspace plugins:

Community plugins:
@nx-plus/vue: 14.1.0

`

gritsenko-konstantin · 2022-09-06T10:05:38Z

Ok i have managed it working.

rm -rf node_modules package-lock.json
npm i -D webpack@4
npm i

this steps required after initial steps for clean setup of vue v2 project.
otherwise webpack v5 would be installed by default.

Prendki · 2022-09-12T10:16:53Z

I have the same issue while i'm installing nuxt plugin. New fresh app
Node: 16.17.0
Npm: 8.15.0
nx: 14.7.4

I just went through README and experienced:

then when i run npm install i get:

Steps to reproduce:
I've just run commands from README :D. That's all. Yesterday i've installed new OS so there should not be weird previous hidden configurations.

amaron09 · 2022-10-10T12:24:12Z

I also have the same issue. RIght now I can't get anything to work with this plugin.
I've followed the instructions in the README by starting a new NX workspace and added vue to it.

I've tried both vue 2 and vue 3 but get errors on both. If I run vue 3 I will get error: NX Cannot read property 'NormalModule' of undefined
If I instead try vue 2 it will give the error: Rule can only have on resource source

Both of these errors can be solved by downgrading webpack to version 4 but this will cause other problems probably because NX only seems to support webpack 5 these days. For example my react-native project that I've added in the same workplace will stop working if I downgrade to webpack 4

Any news on this @ZachJW34 ? 🙂

iqtedar123 · 2022-12-04T03:49:25Z

Can the webpack version be upgraded? Seems like the proper solution.

ZachJW34 · 2022-12-05T03:00:30Z

I have recently published @nx-plus/vue@15.0.0-rc.0 which now used vue-cli v5 (webpack 5). I haven't published any docs/migrations yet but if you're curious you can try it out! It requires v15 of Nx.

I'm going to be working over the next week to write some docs and migrations so stay tuned!

avxkim · 2023-02-12T09:37:54Z

This is actually unusable, thought i was doing something wrong, but following README led to this error. Starting to use NX without this package.

AlexJWayne added the bug Something isn't working label Jul 15, 2022

AlexJWayne changed the title ~~Cannot start freshly generated vue 2 app due to "Rule can only have one resource source" error~~ Cannot start freshly generated vue app due to "Rule can only have one resource source" error Jul 15, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot start freshly generated vue app due to "Rule can only have one resource source" error #268

Cannot start freshly generated vue app due to "Rule can only have one resource source" error #268

AlexJWayne commented Jul 15, 2022 •

edited

mgray88 commented Jul 21, 2022

mgray88 commented Jul 21, 2022

ZachJW34 commented Jul 24, 2022

sevspo commented Aug 18, 2022

AlexJWayne commented Aug 21, 2022

AlexJWayne commented Aug 22, 2022 •

edited

AlexJWayne commented Aug 22, 2022 •

edited

gritsenko-konstantin commented Sep 5, 2022 •

edited

gritsenko-konstantin commented Sep 6, 2022 •

edited

Prendki commented Sep 12, 2022 •

edited

amaron09 commented Oct 10, 2022

iqtedar123 commented Dec 4, 2022

ZachJW34 commented Dec 5, 2022

avxkim commented Feb 12, 2023

Cannot start freshly generated vue app due to "Rule can only have one resource source" error #268

Cannot start freshly generated vue app due to "Rule can only have one resource source" error #268

Comments

AlexJWayne commented Jul 15, 2022 • edited

Current Behavior

Expected Behavior

Steps to Reproduce

Failure Logs

Environment

mgray88 commented Jul 21, 2022

mgray88 commented Jul 21, 2022

ZachJW34 commented Jul 24, 2022

sevspo commented Aug 18, 2022

AlexJWayne commented Aug 21, 2022

AlexJWayne commented Aug 22, 2022 • edited

AlexJWayne commented Aug 22, 2022 • edited

gritsenko-konstantin commented Sep 5, 2022 • edited

Local workspace plugins:

gritsenko-konstantin commented Sep 6, 2022 • edited

Prendki commented Sep 12, 2022 • edited

amaron09 commented Oct 10, 2022

iqtedar123 commented Dec 4, 2022

ZachJW34 commented Dec 5, 2022

avxkim commented Feb 12, 2023

AlexJWayne commented Jul 15, 2022 •

edited

AlexJWayne commented Aug 22, 2022 •

edited

AlexJWayne commented Aug 22, 2022 •

edited

gritsenko-konstantin commented Sep 5, 2022 •

edited

gritsenko-konstantin commented Sep 6, 2022 •

edited

Prendki commented Sep 12, 2022 •

edited