部署至GitHub Pages时出现React is not defined错误求助

AI 小北

2026-8-8

解决GitHub Pages部署React项目时「React is not defined」错误

以下是针对性的排查和解决步骤：

检查React导入语句
所有使用JSX的组件文件顶部，必须添加React导入：
```
import React from 'react';
```
即使是React 17+支持自动导入JSX的版本，部分旧打包配置或第三方依赖仍可能需要显式导入。
配置正确的homepage字段
在项目根目录的package.json中添加或修改homepage：
```
"homepage": "https://<你的GitHub用户名>.github.io/<仓库名称>"
```
路径错误会导致静态资源加载失败，间接引发React未定义的问题。
确认deploy脚本配置
确保package.json的scripts包含正确的构建和部署命令：
```
"scripts": {
  "build": "react-scripts build",
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}
```
执行npm run deploy前，会自动触发build步骤，确保部署的是最新构建产物。
验证GitHub Pages部署源
进入仓库的「Settings」→「Pages」页面，确认部署源选择的是gh-pages分支的/root目录，而非其他分支或路径。
修复Babel配置（若使用自定义配置）
若项目自定义了Babel配置，确保启用了JSX自动导入：
在.babelrc或babel.config.json中添加：
```
{
  "presets": [
    ["@babel/preset-react", { "runtime": "automatic" }]
  ]
}
```
这个配置可以让你无需手动导入React就能使用JSX，避免遗漏导入导致的错误。
清除缓存重新构建部署
依次执行以下命令，清除旧缓存并重新部署：
```
rm -rf node_modules package-lock.json
npm install
npm run build
npm run deploy
```