背景

关于antd在火狐60版本报错The above error occurred in the <Table> component的相关解决方式。

介绍

由于antd在新版使用了一些新的api导致了火狐60版本不兼容，而产生报错，因此，需要进行降级处理，在网上其实有相应的教学办法，就是将antd降到4.15.3版本，这样的确可以解决报错问题。但是，一般出现这种问题，都是开发到一半或者已经运作起来的系统，通过降版本，也会丢失掉一些相应的新版antd的api及样式，这样就需要花费大量时间去做适配（比如input的addonAfter,row的多一层级dom等），因此，基于上述方法，可以再使用引入包别名的方式，使项目同时存在antd两个版本的包，最小程度的进行修改。

过程

使用别名引入antd4.15.3版本的包。 npm 安装

npm install antd4xL@npm:antd@4.15.3 
npm install antd4xL@npm:antd@4.15.3

yarn 安装

yarn install antd4xL@yarn:antd@4.15.3 
yarn install antd4xL@yarn:antd@4.15.3

安装成功后，可以看到package.json也有对应的声明

{ "dependencies": { 
    "antd": "^4.21.0",
    "antd4xL": "yarn:antd@4.15.3"
  }
}

可以通过全局查找，将所有引入antd Table的代码改成由antd4xL引入

import { Table } from 'antd';

改为

import { Table } from 'antd4xL';

修改后，基本就可以在火狐60版本打开了

由于引入了两个版本的包，很容易存在样式问题，因此，可以在入口代码处，显示声明一下css，进行覆盖

import '@/styles/antd/index.less';

结论

以上就是antd项目适配火狐60版本的完美解决方案。