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

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

[ZachJW34]

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!

[ZachJW34]

@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.