React项目导入react-dom/client失败及render空白页问题求助

1. react-dom/client导入报错的根源 #

你的项目依赖的是React 16.13.1，而react-dom/client是React 18才新增的API，React 16环境里根本没有这个模块，所以必然报错。

2. React 16.x的正确渲染写法 #

React 16.x只能用react-dom的render方法，你写的第二个代码片段语法没问题，但页面空白要从这几个方向排查：

排查步骤 #

• 确认根DOM元素存在：检查public/index.html里有没有<div id="root"></div>，这是React渲染的容器，没它肯定白屏。
• 测试App组件是否正常：临时修改App.jsx，返回最基础的内容：

  function App() {
    return <h1>测试内容</h1>;
  }
  export default App;
  

  如果能显示，说明原App组件内部有问题（比如条件渲染逻辑错误、组件未正确导出、依赖组件报错等）。
• 查看控制台错误：按F12打开浏览器开发者工具，看Console面板有没有报错（比如语法错误、未定义变量、组件导入路径错误），这些都会导致组件无法渲染。
• 重装依赖：删除node_modules和package-lock.json，重新执行npm install，避免依赖安装不完整。

3. React 16.x下可用的完整main.jsx代码 #

import React from 'react';
import { render } from 'react-dom';
import App from './components/App.jsx';
import './index.css';

const container = document.getElementById('root');
render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  container
);

4. 可选：升级到React 18使用createRoot #

如果想用上react-dom/client的API，可以升级React相关依赖：

npm install react@^18 react-dom@^18 react-scripts@^5

升级完成后，你最初写的createRoot代码就能正常运行了。

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