React新手创建项目后遇React.jsx类型无效错误，求解决

错误原因 #

这个错误的核心是React尝试渲染的内容不是合法的组件类型：它需要原生HTML标签（字符串）、类组件或函数组件，但实际拿到了一个对象。结合你的代码，大概率是依赖安装异常或缓存问题导致的。

分步解决方案 #

1. 校验React与ReactDOM版本一致性 #

你使用了React 18的ReactDOM.createRoot API，必须确保react和react-dom版本完全匹配。打开项目根目录的package.json，检查dependencies字段：

"react": "^18.2.0",
"react-dom": "^18.2.0"

如果版本不一致或低于18，执行以下命令重装依赖：

npm uninstall react react-dom
npm install react react-dom

2. 清除缓存并重启服务 #

缓存异常是新手常遇到的隐形问题，按以下步骤操作：

• 按下Ctrl+C停止当前开发服务器
• 删除项目根目录下的node_modules文件夹、package-lock.json文件
• 重新安装依赖：npm install
• 重启开发服务器：npm start

3. 确认组件导出导入规则 #

虽然你的代码看起来没问题，但再核对一遍：

• App.js必须是默认导出：export default App;（不能是export const App = ...这种命名导出）
• index.js必须是默认导入：import App from './App';（不能是import { App } from './App';）

4. 极简组件测试 #

把App.js替换为最简组件，验证是否能正常渲染：

import './App.css';

function App() {
  return <h1>Hello React</h1>;
}

export default App;

如果这个能正常显示，说明之前的App组件中可能存在细微语法问题（比如Fragment <>在极旧环境下不兼容，但React 16.2+已支持）。

5. 检查根元素存在性 #

确认public/index.html中包含id为root的元素：

<div id="root"></div>

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