🐛 [BUG] Ant Design Pro with Umi3 No Longer Compiles

[4amramen]

🐛 bug 描述

Ant Design Pro with Umi3 no longer compiles. Upon yarn install, and yarn start, it fails with @babel/helper-compilation-targets: 'opera_mobile' is not a valid target. This has made our company's production app that we built off of the antd umi3 template unable to build anymore and has stopped us from making any further releases to our customers.

ERROR in ./src/components/index.md
Module build failed (from ./node_modules/@umijs/preset-dumi/lib/loader/index.js):
Error: [BABEL] /Users/ramesh/my-directory/myapp/src/components/index.tsx: @babel/helper-compilation-targets: 'opera_mobile' is not a valid target
- Did you mean 'opera'? (While processing: "/Users/my-directory/myapp/node_modules/@umijs/babel-preset-umi/app.js$0$0$39")

📷 复现步骤 | Recurrence steps

Env: Tried both Node v16.16.0 and v18.5.0 but did not work
yarn v1.22.17

npm i @ant-design/pro-cli -g
pro create myapp

Select use umi@3

yarn install
yarn start

🏞 期望结果 | Expected results

Should have compiled and host at localhost:8000

💻 复现代码 | Recurrence code

© 版本信息

• Ant Design Pro 版本: [e.g. 4.0.0]
• umi 版本
• 浏览器环境
• 开发环境 [e.g. mac OS]

🚑 其他信息

[xiahller]

蹲

[ad-vancing]

把 ./src/components/index.md 删了试试

[Gao-sy]

我今天也是遇到了这个问题，不知道咋回事

[4amramen]

把 ./src/components/index.md 删了试试

This worked for me, thanks. However this is a temporary fix for a problem within Umi

这对我有用，谢谢。然而，这只是Umi问题的临时解决方案

[Gao-sy]

今天，我想着选用umi4创建，发现可以启动了

[Actioner1]

把 ./src/components/index.md 删了试试

This worked for me, thanks. However this is a temporary fix for a problem within Umi

这对我有用，谢谢。然而，这只是Umi问题的临时解决方案

确实，看上去是可以运行，但是编译又有一个错误

[langxiaohui123]

我也遇到了umi版本是3.50之前是好的，我是因为删除了nodemodules，重新安装依赖导致的同样的问题，个人感觉是umi依赖的包可能改变了，因为在4的版本默认已经没有这个md文件了，删掉是能解决，也尝试过关闭mfsu，不知道是不是这样
测试了下用procli 3.0的umi也都不能启动了，删掉或者使用umi4

[Actioner1]

解决方案：删除index.md，把依赖删掉和umi文件夹删除，yarn一下，然后运行

[iFwu]

试一下把browserslist版本固定到4.21.9以下（不包括），相关PR：babel/babel#15727

[tuyizhang]

同样的问题，关注

[jayconscious]

fcous

[JLHwung]

Please pin browserslist to <4.21.9.

As umit 3 is not maintained, the @umi/deps is inevitably aging because it bundles quite a lot of building tools: Even if you upgrade Babel to the latest version, under the hood @umi/deps is still using Babel 7.13. Doing so is less memory efficient and prone to compatibility issues.

I suggest pin all your dev dependencies before you migrate to umi 4.

[Qiny-M]

同样问题，关注

[Hyingerrr]

同样问题，关注

[nasa1024]

遇到同样的问题，关注😶‍🌫️

[zombieJ]

@PeachScript 看看是不是最近改了啥？

[PeachScript]

@PeachScript 看看是不是最近改了啥？

看报错是 browserslist 版本和预打包的 babel 版本对不上导致的，Umi 3 需要升下 babel，这周处理下

[gaoxiu333]

遇到了同样的问题

[PeachScript]

看报错是 browserslist 版本和预打包的 babel 版本对不上导致的，Umi 3 需要升下 babel，这周处理下

+ @umijs/preset-dumi@1.1.53

方案改为锁定 dumi v1 的 babel 版本并为 demo 编译禁用 browerslist 配置读取，可以重装依赖再试试看，相关 PR：umijs/dumi#1817 umijs/dumi#1825

---

+ @umijs/preset-dumi@1.1.53

The solution is lock babel version for dumi v1, and ignore browserslist config when compiling demo, you can reinstall dependencies and try again, ref: umijs/dumi#1817 umijs/dumi#1825

[snowpinaster]

还是不行

[PeachScript]

还是不行

感谢反馈，我重新创建脚手架试了下的确有问题，原因是 package.json 中的 browserslist 配置影响了 targets 值引发报错；dumi 发了 @umijs/preset-dumi@1.1.53 禁用 browserslist 配置读取，我这里验证可以编译了，有空可以再试试看

[chenshuai2144]

值得注意是的百分之二十的问题都可以用重装依赖来解决，所以你可以尝试一下：
删除 'node_modules' 文件夹 -> 删除 'package-lock.json'或 'pnpm-lock.yaml' 文件 -> 运行 'pnpm install' 或 'npm install' 命令

首先，根据报错信息，提示说'opera_mobile'不是一个有效的目标，建议将其更改为'opera'。然后，我们需要升级Ant Design Pro的版本到5.0.3。可以按照以下步骤来解决该问题：

1. 确保你的Node版本在v16.16.0或v18.5.0，并且yarn版本在v1.22.17。
2. 使用以下命令全局安装Ant Design Pro的cli：npm i @ant-design/pro-cli -g。
3. 使用以下命令创建一个新的项目：pro create myapp。
4. 在创建项目时选择使用umi@3。
5. 进入项目目录：cd myapp。
6. 使用以下命令安装依赖：yarn install。
7. 执行yarn start启动项目。

这样应该就能够成功编译并在localhost:8000上进行访问了。

另外，根据附带的信息，Ant Design Pro的最新版本是5.0.3，其中包含了一些bug修复和改进。所以也可以尝试升级Ant Design Pro的版本到最新版本，以获得更好的稳定性和性能。

希望以上解决方案能够帮助你解决问题！如果还有其他疑问，请随时提问。