Cannot start freshly generated vue app due to "Rule can only have one resource source" error
AlexJWayne opened this issue · comments
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
Also experiencing this. This makes the project essentially unusable. @ZachJW34 any input?
@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
@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.
Same issue, and the steps above did not work 🤨
@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.
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.
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 :(
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
`
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.
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.
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 ? 🙂
Can the webpack version be upgraded? Seems like the proper solution.
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!
This is actually unusable, thought i was doing something wrong, but following README led to this error. Starting to use NX without this package.