React项目依赖更新后出现Antd Less编译错误：Operation on an invalid type

1. 核对Antd与Less版本兼容性 #

不同版本的Antd对Less的版本有明确依赖，比如Antd 4.x部分版本在Less 4.1.x下会出现运算解析异常。可以：

• 查看Antd官方版本说明，将Antd升级/降级到与Less 4.1.3兼容的版本（比如Antd 4.24.x及以上通常适配Less 4.x）
• 或者尝试将Less降级到4.0.0版本，测试是否能正常编译

2. 调整Less编译配置 #

react-scripts默认的Less配置可能未启用必要的解析选项，需要通过craco或react-app-rewired修改webpack配置：

使用craco的配置示例 #

在项目根目录创建craco.config.js：

module.exports = {
  style: {
    less: {
      javascriptEnabled: true,
      math: 'always', // 强制开启Less运算解析，避免类型判断异常
    },
  },
};

之后将启动命令替换为craco start/craco build

使用react-app-rewired的配置示例 #

创建config-overrides.js：

const { override, addLessLoader } = require('customize-cra');

module.exports = override(
  addLessLoader({
    javascriptEnabled: true,
    math: 'always',
  })
);

启动命令替换为react-app-rewired start/react-app-rewired build

3. 确保全局变量正确加载 #

报错中的@font-size-base、@line-height-base是Antd的全局主题变量，确认编译时变量已被正确引入：

• 在项目的全局Less文件（比如src/index.less）顶部手动引入Antd变量文件：

@import '~antd/lib/style/themes/default.less';

• 检查是否有自定义主题配置覆盖了这些变量，导致变量类型异常

4. 清理缓存并重装依赖 #

缓存或损坏的依赖可能导致编译异常：

1. 删除依赖目录和锁文件：

rm -rf node_modules package-lock.json yarn.lock

2. 重新安装依赖：

npm install # 或 yarn install

3. 清理构建缓存后重新构建：

npm run build -- --no-cache

5. 降级less-loader版本 #

less-loader 11.x与react-scripts 5.x的webpack配置可能存在适配问题，尝试降级到10.x版本：

npm install less-loader@10.2.0 --save-dev

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