如何解决React从18降级到16后Vite项目的‘ReactDOM.createRoot is not a function’错误？

报错的核心原因是 React 16 不支持 ReactDOM.createRoot API，该方法是 React 18 新增的特性。无需降级 Vite 核心版本，只需调整以下3项配置即可解决问题：

1. 修正入口文件渲染逻辑 #

将 main.jsx 中 React 18 风格的渲染代码替换为 React 16 标准写法：

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import './main.css'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)

2. 降级类型定义依赖 #

当前 @types/react 和 @types/react-dom 为 React 18 版本，与 React 16 不匹配，执行以下命令降级到对应版本：

npm install @types/react@^16.14.0 @types/react-dom@^16.9.18 --save-dev

3. 调整 Vite React 插件版本 #

@vitejs/plugin-react@3.x 专为 React 18 设计，需降级到支持 React 16 的 2.x 系列版本：

npm install @vitejs/plugin-react@^2.2.0 --save-dev

完成以上调整后，重启 Vite 开发服务，项目即可正常运行。

内容的提问来源于stack exchange，提问作者Shifty