Invalid options object About PostCSS Loader

[PrinOrange]

Invalid options object for PostCSS Loader

Today (2022-4-7) I try to follow the custom theme with create-react-app tutorial in the official documentation

(https://rsuitejs.com/zh/guide/use-with-create-react-app/)

After following the tutorial completely in a blank project,and I promise to follow the steps of the official documentation without any errors, I found the following error in my React:

---

Compiled with problems:X

ERROR in ./node_modules/rsuite/styles/index.less (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[9].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[9].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[9].use[3]!./node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[9].use[4]!./node_modules/rsuite/styles/index.less)

Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.

• options has an unknown property 'plugins'. These properties are valid:
  object { postcssOptions?, execute?, sourceMap?, implementation? }
  at validate (E:\DragonBook\myblog_cms\node_modules\schema-utils\dist\validate.js:105:11)
  at Object.getOptions (E:\DragonBook\myblog_cms\node_modules\webpack\lib\NormalModule.js:585:19)
  at Object.loader (E:\DragonBook\myblog_cms\node_modules\postcss-loader\dist\index.js:40:24)

---

I have tried to solve these problems, but nothing works. I initially thought there was a conflict between the postCSS loader and the current React Webpack configuration.

This error can still be reproduced on most computers.
I think the tutorial above on the official documentation is outdated. So I sincerely hope that the operation and maintenance of the project can correct the errors in the official documents.

[SevenOutman]

Hi @PrinOrange, could you show me your postcss-loader/postcss options and versions?

[nameer94]

Same here

/* config-overrides.js */
const { override, addLessLoader } = require('customize-cra');

module.exports = override(
  addLessLoader({
    // If you are using less-loader@5 or older version, please spread the lessOptions to options directly.
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: { '@base-color': '#f44336' }
    }
  })
);

package.json

{
  "name": "my_app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^13.2.1",
    "customize-cra": "^1.0.0",
    "less": "^4.1.2",
    "less-loader": "7",
    "react": "^18.0.0",
    "react-app-rewired": "^2.2.1",
    "react-dom": "^18.0.0",
    "react-icons": "^4.3.1",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.0",
    "rsuite": "^5.8.0",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-app-rewired eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

[SevenOutman]

Looks like it's an issue within customize-cra. Consider replacing it with tools like craco. We may also have to update our documentation.

[Seldom29]

Same problem I encountered. Latest version of customize-cra and less-loader were installed.

[SevenOutman]

Same problem I encountered. Latest version of customize-cra and less-loader were installed.

See if this solution works.

[PrinOrange]

Stale