Next.js使用antd的message报错Warning: [antd: compatible] antd v5 support React is 16 ~ 18. see https://u.ant.design/v5-for-19 for compatible.。

react版本：19.0.0

antd版本：5.24.6

打开报错给的官网查看是兼容问题


React 19 兼容问题

由于 React 19 调整了 react-dom 的导出方式，导致 antd 无法直接使用 ReactDOM.render 方法。因而使用 antd 会遇到以下问题：

  • 波纹特效无法正常工作

  • Modal、Notification、Message 等组件的静态方法无效

因而需要通过兼容配置，使 antd 在 React 19 中正常工作。

安装兼容包

npm install @ant-design/v5-patch-for-react-19 --save

在应用入口处引入兼容包

import '@ant-design/v5-patch-for-react-19';

但是根据官网内容安装兼容包发现还是报错，于是问了AI

⚠️ 可能的错误原因

  1. 兼容包 @ant-design/v5-patch-for-react-19 没有正确安装或生效

    • 安装了，但 import '@ant-design/v5-patch-for-react-19'; 可能未生效，或者 Next.js SSR 机制导致了问题。

    • 可以检查 node_modules/@ant-design/v5-patch-for-react-19 是否存在，确认安装成功。

  2. Ant Design 仍然使用的是 v5 的默认 React 版本支持 (16~18)

    • antd 可能仍然检测到 React 19 不兼容。

    • 运行 npm list antd 确保 确实安装的是 antd@5 而不是 antd@4 或其他版本。

  3. 错误的 import 路径

    • 你按 Ctrl + 点击 进去，看到的是 export {}; 可能是 TypeScript 的模块解析问题，表明 @ant-design/v5-patch-for-react-19 的类型声明文件未正确解析。

解决：排除了1和2，3点进去确实是export{}，这里问了ai但是给的方法都没用，于是去了官网访问 @ant-design/v5-patch-for-react-19 的 GitHub issues 查看是否有其他用户反馈类似问题，发现从 package.json 禁用--turbopack能解决这个问题（以下是package.json部分代码）

 "scripts": {
    "dev": "next dev ",//这是更改后的
  // "dev": "next dev --turbopack",//更改前
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

Turbopack 还是一个实验性的打包工具，在某些场景下（尤其是与第三方库或补丁包的兼容性上）可能还存在一些问题。

使用 Turbopack 时，可能由于 Turbopack 的模块解析或打包方式与 antd 补丁包预期不一致，导致 antd 的静态方法（例如 message.error）出现问题或警告持续出现。将启动命令改为 next dev（不带 --turbopack）时，Next.js 会回退到 Webpack 作为打包器，而 Webpack 是成熟稳定的，能更好地处理这些兼容性问题，因此问题解决了。

简而言之：

  • Turbopack（实验性）：可能导致 antd 补丁包无法正常修复 React 19 相关的兼容性问题。

  • Webpack（稳定）：兼容性较好，问题自然消失。

因此，禁用 Turbopack 会使打包过程回归到 Webpack，从而解决相关问题。