React项目部署Netlify时出现createRoot is not a function错误求助

问题详情 #

部署React项目到Netlify平台时触发错误：r.createRoot is not a function，项目代码及依赖配置如下：

index.js 代码 #

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "react-redux";
import { store } from "./redux/store";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
   </React.StrictMode>
);

reportWebVitals();

package.json 依赖项 #

"dependencies": {
  "@emotion/react": "^11.10.6",
  "@emotion/styled": "^11.10.6",
  "@mui/icons-material": "^5.11.16",
  "@mui/lab": "^5.0.0-alpha.127",
  "@mui/material": "^5.12.1",
  "@mui/styles": "^5.12.0",
  "@reduxjs/toolkit": "^1.9.4",
  "@testing-library/jest-dom": "^5.16.5",
  "@testing-library/react": "^13.4.0",
  "@testing-library/user-event": "^13.5.0",
  "axios": "^1.3.5",
  "classnames": "^2.3.2",
  "env-cmd": "^10.1.0",
  "formik": "^2.2.9",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-redux": "^8.0.5",
  "react-router-dom": "^6.10.0",
  "react-scripts": "5.0.1",
  "react-slick": "^0.29.0",
  "react-toastify": "^9.1.2",
  "slick-carousel": "^1.8.1",
  "styled-components": "^5.3.9",
  "web-vitals": "^2.1.4",
  "yup": "^1.1.1"
}

解决方案 #

这个错误本质是运行环境中使用了低于React 18版本的react-dom，因为createRoot是React 18新增的API，按以下步骤排查解决：

1. 本地清理依赖并重新安装 #

先在本地确保依赖版本正确，避免本地构建产物携带旧版本：

rm -rf node_modules package-lock.json
npm install

完成后运行npm run build，确认本地构建无错误，再推送代码到仓库。

2. 强制Netlify清除缓存重新部署 #

Netlify默认会缓存依赖，可能导致旧版本react-dom未被更新：

• 登录Netlify后台，进入你的项目页面
• 点击顶部的Deploys选项卡，找到最新的部署记录，点击右侧的Clear cache and deploy site
• 等待重新部署完成，查看错误是否消失

3. 锁定react-dom版本避免依赖降级 #

部分第三方依赖可能会强制安装旧版react-dom，用以下命令检查依赖树：

npm ls react-dom

如果发现有依赖导致版本降级，在package.json中添加resolutions字段锁定版本：

"resolutions": {
  "react-dom": "18.2.0"
}

然后执行：

npx npm-force-resolutions
npm install

重新构建并推送代码。

4. 检查代码中的导入一致性 #

确保项目中所有使用ReactDOM的地方都采用React 18的导入方式：

import ReactDOM from "react-dom/client";

不要混合使用旧的import ReactDOM from 'react-dom'导入方式，这会导致API不兼容。

内容的提问来源于stack exchange，提问作者Hiếu Nguyễn