TypeError: match.loader.options.plugins is not a function

Question

我正在尝试在 ReactJS 应用程序中使用 tailwindCSS

这些是 package.json 文件

中的脚本命令

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }

这是我的craco.config.js

module.exports = {
    style: {
        postcss: {
            plugins: [
                require('tailwindcss'),
                require('autoprefixer'),
            ],
        },
    },
}

当我使用npm run start命令时，我遇到了这个错误

TypeError: match.loader.options.plugins is not a function
    at extendsPostcss (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\style\postcss.js:54:51)
    at overrideLoader (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\style\postcss.js:97:9)
    at C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\style\postcss.js:118:13
    at Array.forEach (<anonymous>)
    at overridePostcss (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\style\postcss.js:117:17)
    at overrideStyle (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\style\style.js:9:25)
    at mergeWebpackConfig (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\merge-webpack-config.js:77:30)
    at overrideWebpackDev (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\override.js:11:36)
    at C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\scripts\start.js:27:5

我尝试过的事情：

重新安装node_modules

Got this error, when I tried to do that

$ npm i @craco/craco
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: first-react-app@0.1.0
npm ERR! Found: react-scripts@5.0.0
npm ERR! node_modules/react-scripts
npm ERR!   react-scripts@"5.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-scripts@"^4.0.0" from @craco/craco@6.4.3
npm ERR! node_modules/@craco/craco
npm ERR!   @craco/craco@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Answer 1

看起来不再需要 CRACO 的 Tailwind 配置了。

https://github.com/facebook/create-react-app/issues/11771#issuecomment-997217680

查看Tailwind 3.0安装步骤： https://tailwindcss.com/docs/guides/create-react-app

Answer 2

你的问题解决了吗？有一个解决问题的方法。 https://github.com/facebook/create-react-app/issues/11777

try to replace "postcss" with "postcssOptions" in craco config I had the same problem , this method works for me.

Answer 3

我在 carco.config.js 中用 postOptions 替换了 postcss 并且有效！

Answer 4

然而，tailwind 文档中不再需要 craco 配置在提到的解决方案中，如果您替换

postcss 在 craco.config.js 上使用 postOptions 它也可以工作

TypeError: match.loader.options.plugins is not a function

TypeError: match.loader.options.plugins is not a function

node.js

reactjs

craco