Node 18.7.0 Can only have one resource source when compiling with nuxt-CodePudding

I have the following package file

{
  "version": "1.0.0",
  "scripts": {
    "dev": "node ./pm2.js",
  },
  "dependencies": {
    "@nuxtjs/axios": "5.10.2",
    "@nuxtjs/style-resources": "1.0.0",
    "@sendgrid/mail": "6.3.1",
    "axios": "0.19.2",
    "cheerio": "1.0.0-rc.2",
    "compression": "1.7.4",
    "cookie-parser": "1.4.6",
    "express": "4.17.1",
    "geoip2ws": "1.8.10",
    "gsap": "2.1.3",
    "lodash": "4.17.21",
    "moment": "2.29.4",
    "mongoose": "5.9.10",
    "morgan": "1.10.0",
    "nuxt": "2.15.8",
    "pm2": "4.4.0",
    "request": "2.88.0",
    "sitemap": "2.2.0",
    "vcards-js": "2.10.0",
    "vuex-router-sync": "5.0.0"
  },
  "devDependencies": {
    "@babel/core": "7.18.10",
    "@babel/eslint-parser": "7.18.9",
    "chokidar": "3.4.0",
    "eslint": "8.21.0",
    "eslint-config-standard": "17.0.0",
    "eslint-plugin-vue": "9.3.0",
    "eslint-webpack-plugin": "2.7.0",
    "normalize-scss": "7.0.1",
    "postcss-preset-env": "6.7.0",
    "sass": "1.54.0",
    "sass-loader": "10.3.1"
  },
  "engines": {
    "node": "18.7.0",
    "npm": "8.13.2"
  }
}

But upon running I get the following error

| Error: Rule can only have one resource source (provided resource and test include exclude) in { | "use": [ | { | "loader": "/usr/src/app/node_modules/babel-loader/lib/index.js", |
"options": { | "configFile": false, | "babelrc": false, | "cacheDirectory": true, | "envName": "server", | "presets": [ | [ |
/usr/src/app/node_modules/@nuxt/babel-preset-app/src/index.js, |
{ | "corejs": { | "version": 2 |
} | } | ] | ] | }, |
"ident": "clonedRuleSet-30.use[0]" | } | ] | } | at checkResourceSource (/usr/src/app/node_modules/@nuxt/webpack/node_modules/webpack/lib/RuleSet.js:167:11) | at RuleSet.normalizeRule (/usr/src/app/node_modules/@nuxt/webpack/node_modules/webpack/lib/RuleSet.js:198:4)

I am not sure which package is causing this?

CodePudding user response：

Nuxt works better with Node 16.

Also, regarding the error it's more of a configuration thing than a package.json issue. Did you made any updates to that one recently?

Btw, did you also tried that one maybe? https://github.com/nuxt/nuxt.js/issues/9268#issuecomment-836521127

Lowering the version of sass-loader may also be a good idea. Not sure why you do have both sass and sass-loader at the same time tbh.
moment should be removed from the project overall (deprecated) but the rest seems quite okay to me.

This is also how to properly work with SASS: How to setup SASS/SCSS/sass-loader in Nuxt

CodePudding user response：

You should lower the webpack version

Try using :-

npm install --save-dev webpack@4

As it requires peer dependency of webpack@4