背景

基于antd5搭建了一套我们内部使用的ui组件库，同时项目中仍然存在antd4，两者共存，在引入时发现了国际化配置失效的问题

antd5国际化配置失效

antd的日期中文国家化配置失效了，看起来组件非常奇怪，年为中文，月和星期又为英文。

图片1

查询github issues，发现有人提到了可能是dayjs版本不一致的问题

我们通过在项目中输入以下命令，可以看到确实装了好几个版本的依赖

1

npm ls dayjs

图片2

可以看到项目中一共存在了三个版本的dayjs，这时候就开始疑惑了

  1. 在antd5中，dayjs的依赖是这么写的

图片3表示支持1.11.1 - 2.0.0之前的版本，优先安装最新

  1. 在我们基于antd5封装的组件库中，后来的某个组件也用到了dayjs

图片4表示支持1.11.9 - 2.0.0之前的版本

  1. 在我们的项目，以及几个我们自己的常用库中也用到了dayjs，它们都是这样的

图片5表示支持1.8.25到2.0.0的所有版本。

所以这就很奇怪了，按照^的作用，他们理论上会安装同一个版本的依赖，然而事实却相悖，这时候才想到会不会是yarn.lock锁住了

yarn.lock在项目中的变迁

图片6

经过了一系列的复现及思考，理清了这个过程

在这个项目刚刚建立的时候，我们执行yarn.lock安装了1.9.6的依赖包

后来引入antd5，由于antd5的dayjs依赖必须大于1.11.1，因此安装了1.11.8的依赖包

再后来在组件库中用到dayjs，这个dayjs的依赖必须大于1.11.9，因此又安装了1.11.9的依赖包

最后造成了这个局面，对于一般的项目来说，共存问题不大，但是dayjs就会导致国际化配置失效

解决

手动删除两个lock信息，然后重新执行 yarn

图片7

最终效果也ok了

图片8