React18下RTK Query示例运行报错：ReactDOM.render弃用，请改用createRoot

我在测试RTK Query的一个示例项目时，运行后弹出如下警告：

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running

我查阅相关问题后未找到合适解决办法，我的入口文件代码如下：

import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import { ChakraProvider } from '@chakra-ui/react'

import App from './App'
import { store } from './app/store'
import { Provider } from 'react-redux'

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <ChakraProvider>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </ChakraProvider>
    </Provider>
  </React.StrictMode>
)

问题原因 #

你的代码已经正确使用了React 18的createRoot新API，警告并非来自你的代码，大概率是项目依赖的第三方库（比如示例内置依赖、Chakra UI、react-router-dom等旧版本）内部仍在调用已弃用的ReactDOM.render。

解决步骤 #

• 升级适配React 18的依赖版本

  1. 打开项目package.json，确认react、react-dom已升级到18.x版本。
  2. 将@chakra-ui/react、react-router-dom、@reduxjs/toolkit等依赖更新到最新稳定版，这些库的新版本基本都适配了React 18的API规范。
  3. 执行npm install或yarn install重新安装依赖。

• 排查项目内其他使用ReactDOM.render的地方
  如果升级依赖后警告仍存在，检查项目中是否有其他入口文件、弹窗/模态框等组件仍在使用旧API，将其替换为createRoot写法：
  旧写法示例：

  import ReactDOM from 'react-dom'
  ReactDOM.render(<Modal />, document.getElementById('modal-root'))
  

  替换为新写法：

  import ReactDOM from 'react-dom/client'
  const modalRoot = document.getElementById('modal-root')
  const root = ReactDOM.createRoot(modalRoot)
  root.render(<Modal />)
  

• 临时屏蔽警告（不推荐）
  若暂时无法升级依赖，可在入口文件顶部添加代码屏蔽该特定警告：

  const originalConsoleWarn = console.warn
  console.warn = (...args) => {
    if (typeof args[0] === 'string' && args[0].includes('ReactDOM.render is no longer supported')) {
      return
    }
    originalConsoleWarn(...args)
  }
  

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