Rule can only have one resource source

[voxivoid]

Version

create-nuxt-app: v.5.0.0
node: v16.19.0
npm: v8.19.3

Steps to reproduce

npx create-nuxt-app test-nuxt

create-nuxt-app v5.0.0
✨  Generating Nuxt.js project in test-nuxt
? Project name: test-nuxt
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Element
? Template engine: HTML
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint, Prettier, Lint staged files
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: None
? Version control system: Git

npm run dev

What is Expected?

It is expected that npm run dev runs the application without errors after a clean creation.

What is actually happening?

npm run dev

> test-nuxt@1.0.0 dev
> nuxt


 WARN  webpack@5.75.0 is installed but ^4.46.0 is expected                                                                                                                                                        16:45:29


   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt @ v2.16.1                      │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   client-side          │
   │   ▸ Target:      server               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

ℹ Preparing project for development                                                                                                                                                                               16:45:29
ℹ Initial build may take a while                                                                                                                                                                                  16:45:29
ℹ Discovered Components: .nuxt/components/readme.md                                                                                                                                                               16:45:29
✔ Builder initialized                                                                                                                                                                                             16:45:29
✔ Nuxt files generated                                                                                                                                                                                            16:45:30

 ERROR  Rule can only have one resource source (provided resource and test + include + exclude) in {                                                                                                              16:45:30
  "type": "javascript/auto",
  "use": [
    {
      "loader": "/home/voxivoid/code/software-angels/test-nuxt/node_modules/babel-loader/lib/index.js",
      "options": {
        "configFile": false,
        "babelrc": false,
        "cacheDirectory": true,
        "envName": "client",
        "presets": [
          [
            "/home/voxivoid/code/software-angels/test-nuxt/node_modules/@nuxt/babel-preset-app/src/index.js",
            {
              "corejs": {
                "version": 3
              }
            }
          ]
        ]
      },
      "ident": "clonedRuleSet-4.use[0]"
    }
  ]
}

  "type": "javascript/auto",
  "use": [
  {
  "loader": "node_modules/babel-loader/lib/index.js",
  "options": {
  "configFile": false,
  "babelrc": false,
  "cacheDirectory": true,
  "envName": "client",
  "presets": [
  [
  "node_modules/@nuxt/babel-preset-app/src/index.js",
  {
  "corejs": {
  "version": 3
  }
  }
  ]
  ]
  },
  "ident": "clonedRuleSet-4.use[0]"
  }
  ]
  }
  at checkResourceSource (node_modules/@nuxt/webpack/node_modules/webpack/lib/RuleSet.js:167:11)
  at Function.normalizeRule (node_modules/@nuxt/webpack/node_modules/webpack/lib/RuleSet.js:198:4)
  at node_modules/@nuxt/webpack/node_modules/webpack/lib/RuleSet.js:110:20
  at Array.map (<anonymous>)
  at Function.normalizeRules (node_modules/@nuxt/webpack/node_modules/webpack/lib/RuleSet.js:109:17)
  at new RuleSet (node_modules/@nuxt/webpack/node_modules/webpack/lib/RuleSet.js:104:24)
  at new NormalModuleFactory (node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModuleFactory.js:115:18)
  at Compiler.createNormalModuleFactory (node_modules/@nuxt/webpack/node_modules/webpack/lib/Compiler.js:636:31)
  at Compiler.newCompilationParams (node_modules/@nuxt/webpack/node_modules/webpack/lib/Compiler.js:653:30)
  at Compiler.compile (node_modules/@nuxt/webpack/node_modules/webpack/lib/Compiler.js:661:23)
  at node_modules/@nuxt/webpack/node_modules/webpack/lib/Watching.js:77:18
  at AsyncSeriesHook.eval [as callAsync] (eval at create (node_modules/@nuxt/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:42:1)
  at AsyncSeriesHook.lazyCompileHook (node_modules/@nuxt/webpack/node_modules/tapable/lib/Hook.js:154:20)
  at Watching._go (node_modules/@nuxt/webpack/node_modules/webpack/lib/Watching.js:41:32)
  at node_modules/@nuxt/webpack/node_modules/webpack/lib/Watching.js:33:9
  at Compiler.readRecords (node_modules/@nuxt/webpack/node_modules/webpack/lib/Compiler.js:529:11)
  at new Watching (node_modules/@nuxt/webpack/node_modules/webpack/lib/Watching.js:30:17)
  at Compiler.watch (node_modules/@nuxt/webpack/node_modules/webpack/lib/Compiler.js:244:10)
  at Compiler.compiler.watch (node_modules/time-fix-plugin/index.js:14:24)
  at wdm (node_modules/@nuxt/webpack/node_modules/webpack-dev-middleware/dist/index.js:263:24)
  at WebpackBundler.webpackDev (node_modules/@nuxt/webpack/dist/webpack.js:1835:7)
  at node_modules/@nuxt/webpack/dist/webpack.js:1797:23
  at new Promise (<anonymous>)
  at WebpackBundler.webpackCompile (node_modules/@nuxt/webpack/dist/webpack.js:1795:16)
  at async Promise.all (index 0)
  at async WebpackBundler.build (node_modules/@nuxt/webpack/dist/webpack.js:1779:5)
  at async Builder.build (node_modules/@nuxt/builder/dist/builder.js:249:5)
  at async Object._buildDev (node_modules/@nuxt/cli/dist/cli-dev.js:79:5)
  at async Object.startDev (node_modules/@nuxt/cli/dist/cli-dev.js:55:7)
  at async Object.run (node_modules/@nuxt/cli/dist/cli-dev.js:44:5)
  at async NuxtCommand.run (node_modules/@nuxt/cli/dist/cli-index.js:356:7)

[Caceresenzo]

I was having the same issues. Its not an official fix, but here is how you can fix it.

You must downgrade webpack to v4 and postcss to v7.

  "devDependencies": {
    "webpack": "^4.46.0",
    "postcss": "^7.0.32",
    "postcss-import": "^12.0.1",
    "postcss-import-resolver": "^2.0.0",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "postcss-url": "^8.0.0"
  }

Next, if you have the following warning:

You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.

Set postcss property to null in your nuxt.config.js to fix it:

  build: {
    postcss: null,
  },

[amosbatista]

Hi,

I have the same problem, but there's none of these libraries:
devDependencies": { "@nuxt/types": "^2.15.8", "@nuxt/typescript-build": "^2.1.0", "@nuxtjs/vuetify": "^1.12.3", "@vue/test-utils": "^1.3.0", "babel-core": "7.0.0-bridge.0", "babel-jest": "^29.1.2", "jest": "^29.1.2", "jest-environment-jsdom": "^29.1.2", "ts-jest": "^29.0.3", "vue-jest": "^3.0.4" }

My project setup:
C:\Users\xxx\dev>npm init nuxt-app@latest proj-test-ts-2 npm WARN config global--global, --localare deprecated. Use--location=global` instead.

create-nuxt-app v5.0.0
✨ Generating Nuxt.js project in proj-test-ts-2
? Project name: proj-test-ts-2
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Vuetify.js
? Template engine: Pug
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: (Press to select, to toggle all, to invert selection)
? Testing framework: Jest
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press to select, to toggle all, to invert selection)
? Continuous integration: None
? Version control system: Git
npm WARN config global --global, --local are deprecated. Use --location=global instead.

`

[Caceresenzo]

They are nested/referenced libraries.
You can see them in package-lock.json.

Overwriting them "fix" the issue.