search

ZachJW34 / nx-plus

Collection of Nx Community Plugins
MIT License
300 stars 52 forks source link

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

Open AlexJWayne opened 1 year ago

AlexJWayne commented 1 year ago

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
mgray88 commented 1 year ago

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

mgray88 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

Same issue, and the steps above did not work 🤨

AlexJWayne commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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: https://github.com/ZachJW34/nx-plus/issues/225 :(

gritsenko-konstantin commented 1 year ago

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:

$ 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 commented 1 year ago

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 commented 1 year ago

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: image then when i run npm install i get: image

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 commented 1 year ago

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 commented 1 year ago

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

ZachJW34 commented 1 year ago

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 commented 1 year ago

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