React v17项目报Target container非DOM元素错误，求解决方案

问题场景 #

• 项目依赖："react": "~17.0.0"，"react-dom": "~17.0.0"
• src/index.js 使用动态导入加载bootstrap：

  import('./bootstrap');
  export { };
  

• src/bootstrap.jsx 代码从React 18迁移而来，当前写法：

  import ReactDOM from 'react-dom';
  import App from './components/App';
  
  const container = document.getElementById('root');
  const root = ReactDOM.render(container);
  
  root.render(<App />);
  

• public/index.html 已包含<div id="root"></div>，但浏览器控制台报错：

  Uncaught (in promise) Error: Target container is not a DOM element.
  

报错原因 #

React 17与React 18的根节点渲染API完全不同：

• React 18 使用ReactDOM.createRoot(container)创建根实例，再调用root.render(<Component />)
• React 17 仍使用旧版同步渲染API：ReactDOM.render(<Component />, container)，不需要先创建根实例的步骤

你当前的代码错误地将React 18的API用法套在了React 17上，调用ReactDOM.render(container)时，React会把container当作要渲染的React元素，而非目标容器，因此找不到合法的渲染目标，抛出报错。

解决方案 #

修改src/bootstrap.jsx代码，改用React 17的正确渲染方式：

import ReactDOM from 'react-dom';
import App from './components/App';

const container = document.getElementById('root');
// 直接调用ReactDOM.render，传入组件和容器
ReactDOM.render(<App />, container);

这样就能正确将<App />渲染到id为root的DOM容器中，解决报错问题。

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