React应用部署GitHub Pages后显示空白页及TypeError问题求助

控制台抛出的Uncaught TypeError: Super expression must either be null or a function错误，核心原因是某个组件的继承逻辑出现异常，结合错误栈指向Profile.jsx:188:28，按以下步骤排查：

1. 检查Profile.jsx核心代码 #

直接定位到Profile.jsx第188行附近，重点看：

• 如果是类组件：确保正确引入React和Component，比如：

  import React, { Component } from 'react';
  class Profile extends Component {
    // ... 组件逻辑
  }
  

  避免拼写错误（比如component小写）、继承了null/undefined，或者误将函数组件写成类组件的继承形式。
• 如果用了高阶组件（比如React.memo、自定义HOC）：检查包裹组件的语法是否正确，比如：

  // 错误示例：memo包裹类组件时写法有误
  const Profile = memo(class extends Component { ... });
  // 正确写法
  class ProfileComp extends Component { ... }
  const Profile = memo(ProfileComp);
  

2. 本地预览生产构建产物 #

部署前先在本地验证build后的代码，执行：

npx serve build

访问serve启动的本地端口（通常是localhost:3000），如果同样出现报错，说明问题出在生产编译阶段，和GitHub Pages的部署配置无关，聚焦代码本身即可。

3. 检查组件导入导出逻辑 #

确认Profile组件的导出方式和导入它的地方是否匹配：

• 如果是默认导出export default Profile，导入时用import Profile from './Profile'；
• 如果是命名导出export const Profile = ...，导入时用import { Profile } from './Profile'；
  不匹配的导入会导致组件变成undefined，继承时触发Super表达式错误。

4. 重置依赖环境 #

如果以上步骤没解决，可能是依赖缓存或版本冲突问题：

1. 删除node_modules文件夹和package-lock.json文件
2. 重新执行npm install
3. 再次构建并部署

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