使用 craco后react项目启动报错`TypeError: Cannot read properties of undefined (reading ‘push‘)`

使用 craco对 create-react-app 的默认配置进行自定义时踩的坑

TypeError: Cannot read properties of undefined (reading 'push')

本人在学习react过程中，按照Ant-Design官网的教程学习使用 create-react-app 一步步地创建一个 TypeScript 项目，并引入 antd时遇到的问题.

前期按照官网的步骤一步一步进行很是顺利,当我在学习高级配置部分,使用craco对 create-react-app 的默认配置进行自定义时遇到了问题.具体问题如下:

我按照教程安装了craco和craco-antd并修改了 package.json 里的 scripts 属性以及添加好了 craco.config.js 文件.做完这些后,按照官方文档的说法是:修改后重启 yarn start，如果看到一个绿色的按钮就说明配置成功了。

然鹅,我执行yarn run start 后竟然报错,刚开始我以为是自己哪里粗心没配对,经过再三检查后确认我是完全按照官方教程操作的,那么此时就需要自己解决此问题了,我按照往常一贯做法,先自己看报错,报错如下:

D:\workspace\antd-demo-ts-error>yarn start
yarn run v1.22.18
$ craco start
D:\workspace\antd-demo-ts-error\node_modules\craco-less\lib\craco-less.js:141
  fileLoaderMatch.loader.exclude.push(lessExtension);
                                 ^

TypeError: Cannot read properties of undefined (reading 'push')
    at Object.overrideWebpackConfig (D:\workspace\antd-demo-ts-error\node_modules\craco-less\lib\craco-less.js:141:34)
    at Object.overrideWebpackConfig (D:\workspace\antd-demo-ts-error\node_modules\craco-antd\lib\craco-antd.js:64:26)
    at overrideWebpack (D:\workspace\antd-demo-ts-error\node_modules\@craco\craco\lib\features\plugins.js:42:40)
    at D:\workspace\antd-demo-ts-error\node_modules\@craco\craco\lib\features\plugins.js:64:29
    at Array.forEach (<anonymous>)
    at applyWebpackConfigPlugins (D:\workspace\antd-demo-ts-error\node_modules\@craco\craco\lib\features\plugins.js:63:29)
    at mergeWebpackConfig (D:\workspace\antd-demo-ts-error\node_modules\@craco\craco\lib\features\webpack\merge-webpack-config.js:110:30)
    at overrideWebpackDev (D:\workspace\antd-demo-ts-error\node_modules\@craco\craco\lib\features\webpack\override.js:11:36)
    at D:\workspace\antd-demo-ts-error\node_modules\@craco\craco\scripts\start.js:27:5
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

报错的文件都是下载的包里的内容,不出意外地毫无头绪.

那么此时就要求助论坛了,百度,csdn都查了,完全找不到解决方案,好像大家都没有遇到过这个问题,此时我已经开始怀疑人生了.

下面是重点:

没有办法,只能求助大神,大神过来,从下往上看了报错,

   at Object.overrideWebpackConfig (D:\workspace\antd-demo-ts-error\node_modules\craco-less\lib\craco-less.js:141:34)
   at Object.overrideWebpackConfig (D:\workspace\antd-demo-ts-error\node_modules\craco-antd\lib\craco-antd.js:64:26)

显然,craco-less.js和craco-antd.js两个文件是重点,我们根据这两个文件去github上找到他的项目,项目地址

在项目的问题模块Issues中再去找,会发现关于此问题的讨论有很多:

解决方案也有很多,主要原因还是版本冲突的问题,只要把package.json里的"react-scripts": “5.0.0”,由5.00降级到4.0.3就可以了.问题完美解决

当然，社区还有很多其他解决方案，大家可以按照此方法自行去查看