背景

使用@ant-design/pro-components包中的ProTable组件，展示带搜索区域的表格。

遇到的问题

问题1：点击列设置中的某一列报错：

• 问题描述：
  Something went wrong. Minified Reacterror #185; visit https:/reactis.org/docs/error-deoderhtml?invariant=185 for the full message or use the non-minified dev environment for fulerrors and additional helpful warnings.

image.png

image.png

• 解决办法：升级@ant-design/pro-components的版本为：2.5.11
• 问题原因：
  image.png
  ，详情点击这里

问题2：点击搜索区域中的日期区间组件报错：clone.weekday is not a function

• 问题描述：

  
  
  image.png

在测试过程中发现了一个比较有意思的bug问题，我们使用的是antd中的DatePicker组件，当时间选择框存在已经设定的初始值后,点击时间选择框直接报错,但是当清除内容或者处于新建没有默认值的情况下，组件可以正常运行。

以下是报错信息:

image.png

• 背景
  我一开始是，本机和测试环境都正常，只有线上环境会报上面的错。
  找到环境：本机：node 16 线上node12.
  于是我把本机node降为12.18.0。在不断的修改@ant-design/pro-components的版本，有的就可以在本机复现这个bug，有的版本不行。
• 解决办法

1. 添加antd-dayjs-webpack-plugin插件引入
   只需要安装依赖后，在webpack配置中添加相关的插件即可

// webpack-config.js 注意一定是这个文件，在webpack.base.config.js中不行
import AntdDayjsWebpackPlugin from 'antd-dayjs-webpack-plugin';

module.exports = {
  // ...
  plugins: [new AntdDayjsWebpackPlugin()],
};

2. 还需要引入dayjs，中英文转化的问题

import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn'; // 切换为中文 locale
import arraySupport from 'dayjs/plugin/arraySupport';
import timezone from 'dayjs/plugin/timezone';
import toArray from 'dayjs/plugin/toArray';

dayjs.extend(timezone);
dayjs.extend(arraySupport);
dayjs.extend(toArray);
dayjs.tz.setDefault('Asia/Shanghai');
dayjs.locale('zh-cn');

• 问题原因

• image.png
  
  可以查看[这里](替换 Moment.js - Ant Design
  
  image.png

• 最后
  关于具体造成问题的原因，从issue下面的回复有人提到是因为在node_modules中存在了两个dayjs，一个是原本通过npm或yarn引入的dayjs依赖，另一个存在于rc-picker中的依赖(也就是antd引入的时间相关的组件模块)，但是看了官方修复也只是把原先引入的固定版本的dayjs转变成了一个更加广泛的1.x版本，并没有删除这个依赖，所以目前还不是很清楚出现这个问题的根本原因(继续探索中。。。)

参考

• 关于使用Antd中的DatePicker出现的日期格式转化问题(Dayjs和Momentjs)javascript奔跑的柯基-华为云开发者联盟 (csdn.net)
• isssues