升级antd至alpha版本后运行React项目报Maximum call stack size exceeded错误

问题根因 #

你遇到的Maximum call stack size exceeded错误是antd 4.17.0-alpha.0版本的已知问题：该版本的antd.less与antd.compact.less存在内部循环引用，同时引入两个样式文件会触发less编译器的递归解析逻辑，最终耗尽调用栈抛出错误。

解决方案 #

按优先级尝试以下方案即可解决：

• 方案1：调整antd样式引入逻辑
  你当前App.less中同时引入了全量样式和紧凑模式样式，而antd.compact.less本身已经包含完整的antd样式与紧凑主题变量覆盖，无需重复引入其他antd基础样式。将原有三行antd相关引入修改为仅保留紧凑样式引入即可：

  // 删除原有下面两行引入
  // @import "~antd/lib/style/themes/default.less";
  // @import "~antd/dist/antd.less";
  @import "~antd/dist/antd.compact.less"; // 仅保留这一行紧凑样式引入
  

  如果你需要自定义全局主题变量，可在引入紧凑样式之前自行定义变量，会自动覆盖默认值。

• 方案2：升级编译依赖
  如果调整引入后仍有报错，可将项目的less与less-loader升级到适配版本，新版本对循环引用的解析容错性更高：

  npm install less@4 less-loader@10 --save-dev
  

• 方案3：使用预编译CSS规避编译问题
  如果你不需要自定义antd全局主题，可直接引入预编译好的紧凑模式CSS文件，完全避开less编译环节：
  在项目入口文件（如index.js/index.ts）中加入以下引入，同时删除App.less中所有antd相关的less引入即可：

  import 'antd/dist/antd.compact.css'
  

内容的提问来源于stack exchange，提问作者ruuuyin