React 18改用createRoot仍提示ReactDOM.render弃用警告问题排查

我正在使用React 18，已按照官方文档及StackOverflow方案，将index.js中的渲染代码改为使用react-dom/client的createRoot API。但在重装node_modules、重启服务、清理Chrome浏览器缓存后，仍收到“ReactDOM.render is no longer supported in React 18”的警告。

旧index.js代码 #

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

新index.js代码 #

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const container = document.getElementById('root');
const root = createRoot(container);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

reportWebVitals();

package.json配置 #

{
  "name": "my-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@chakra-ui/react": "^1.8.8",
    "@emoji-mart/data": "^1.0.5",
    "@emoji-mart/react": "^1.0.1",
    "@fontsource/noto-sans": "^4.5.9",
    "@testing-library/jest-dom": "^5.16.3",
    "@testing-library/user-event": "^13.5.0",
    "date-fns": "^2.28.0",
    "firebase": "^9.6.10",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "^5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest --passWithNoTests",
    "eject": "react-scripts eject",
    "local:pub": "npm run build && firebase serve --only hosting",
    "lint": "eslint --fix",
    "prettier": "prettier --write .",
    "prepare": "husky install"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "lint-staged": {
    "**/*.{js,jsx}": [
      "npm run lint",
      "prettier --write ."
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "@testing-library/react": "^13.0.1",
    "babel-jest": "^27.5.1",
    "eslint": "^8.16.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.30.0",
    "husky": "^8.0.0",
    "jest": "^28.1.3",
    "lint-staged": "^13.0.0",
    "prettier": "^2.6.2"
  }
}

问题原因及解决方案 #

核心原因 #

警告并非来自你的index.js，而是第三方依赖库或项目中其他未更新的文件仍在调用ReactDOM.render。从你的package.json来看，@chakra-ui/react@1.8.8是适配React 17的版本，内部未兼容React 18的createRoot API，仍在使用旧的渲染方式。

解决方案 #

1. 升级第三方依赖到React 18兼容版本
   重点升级@chakra-ui/react到v2.x版本（v2+完全适配React 18），执行命令：

   npm install @chakra-ui/react@latest @chakra-ui/icons@latest @emotion/react@latest @emotion/styled@latest framer-motion@latest
   

2. 排查项目内其他文件

   • 检查是否存在多个渲染入口文件（如admin.js、mobile.js等），确认所有入口都已改用createRoot
   • 搜索项目内所有文件，确认没有自定义代码直接调用ReactDOM.render

3. 统一依赖版本
   执行npm ls react-dom查看是否有依赖间接引入旧版本react-dom，若存在，在package.json中添加overrides强制统一：

   "overrides": {
     "react-dom": "^18.0.0"
   }
   

4. 清理构建缓存
   除浏览器缓存外，清理react-scripts的构建缓存：

   rm -rf node_modules/.cache
   

   之后重启开发服务即可。

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