React项目本地运行时出现TypeError: render不是函数的问题求助

错误原因 #

你在index.js中错误地从react包导入了ReactDOM，而ReactDOM的相关API（比如render）属于react-dom包，并非react核心包。这就导致你调用ReactDOM.render时，实际调用的是React对象的render方法——但React本身并没有这个方法，因此抛出TypeError: ...render is not a function错误。

修复方案 #

根据你使用的React版本，选择对应的修正方式：

方式1：React 17及更早版本 #

修改index.js中的ReactDOM导入语句，将来源改为react-dom：

import React from "react";
import ReactDOM from "react-dom"; // 修正导入来源
import App from "./App";

ReactDOM.render(<App />, document.getElementById('root'));

方式2：React 18版本 #

React 18移除了ReactDOM.render方法，改用createRoot API，需要调整代码如下：

import React from "react";
import ReactDOM from 'react-dom/client'; // 导入react-dom/client
import App from "./App";

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

验证 #

修改代码后重启本地服务器，错误应该会消失，App组件的内容会正常渲染到页面中。

内容的提问来源于stack exchange，提问作者John E.