前言

umi项目经过太长时间的维护和迭代，以前使用antd-mobile是v2，很多组件都不能维护，或者不满足使用需求了，所以要把v2升级到v5

感慨

升级，或者说迁移，这在官网都有相应的指南，详情可以戳(从 v2 迁移 - Ant Design Mobile)

而本文主要是记录迁移过程中遇到的坑。

以下内容请你按照官网推荐方式1完成了安装和替换之后再行阅读。

坑1

样式丢失，直接迁移完成后，你可能会发现组件样式没了，官网让你在入口文件里面引入样式

import 'antd-mobile-v2/dist/antd-mobile.less'; // or 'antd-mobile-v2/dist/antd-mobile.css'

那么请引入样式

如果你找不到入口文件，请找到并查看你的route文件，顶级路由所属的component。在里面引入即可

坑2

接下来，继续运行项目，你可能还会遇到报错

类似这样的

ERROR Failed to compile with 4 errors
These dependencies were not found:

.......

.....

Module not found:xxxxxxxxxxxxxxxx

...... ....

AssertionError [ERR_ASSERTION]: chunk of umi not found.

这里就需要你找到.umirc.ts文件，设置mobile:false，将umi内置禁用。


export default defineConfig({
  base: ....,
  publicPath: ....,
  .....
  antd: {
    dark: false,
    compact: true,
    mobile:false,//在这里设置
  },
  .....
});

坑3

继续运行项目，你可能还会遇到报错：

Validate config "antd" failed, "mobile" is not allowed

这时候需要你找到package.json文件，找到插件preset，具体名称可能是@umijs/preset-react，也可能是别的类似插件，那么现在修改版本，本文作者的项目使用的就是@umijs/preset-react，项目中原本的版本是^1.x，修改版本为^1.7.0。

其他版本行不行，本文作者（也就是我）没有详细实验，也没有查阅更多的插件更新日志，所以不是很清楚。

因为在其他社区论坛发现也有人说过要升级插件preset，所以本文作者试过最新版本。

截至2024年3月7日星期四，安装过最新版本也是不行的。

如果你不清楚如何修改版本，或者你不知道插件都有哪些版本可以更换，戳这里(Home | Yarn - JavaScript 软件包管理器 | Yarn中文文档 - Yarn中文网 (yarnpkg.cn))，点开后搜索就行。

以上，就是你在迁移过程中大概会遇到的所有坑。埋上！！！！

antd-mobile-v2升级到antd-mobile-v5排坑指南

前言

感慨

坑1

坑2

坑3