logo标签列表

类型错误：match.loader.options.plugins不是一个函数。

node.jsreactjscraco
30

我正在尝试在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

我尝试过的事情：

  1. 重新安装node_modules

尝试这样做时，出现了这个错误

$ 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.
6个回答
53
我花了一周的时间才找到这个。谢谢！ - Radespy
23

我在carco.config.js中用postOptions替换了postcss，现在它可以工作了！

这个答案是错误的。使用 postOptions 的效果与完全删除它相同。 - Nick
13
3
[警告] 最被赞同的答案建议将postcss更改为postcssOptions，但可能不是您所期望的。

尝试在craco配置中用“postcssOptions”替换“postcss”

当前，craco不支持postcssOptions，所以更改键只会使craco忽略您的配置。
如果您需要自定义配置，则最好进行修补craco。
3

在 Tailwind 文档中，不再需要使用 craco 配置文件。然而，在提到的解决方案中，你可以将 postcss 替换为 craco.config.js 中的 postOptions 也可以正常工作。

-1

我用postOptions替换了postcss，现在它可以正常工作了。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接