部署React应用至GitHub Pages后出现空白页问题求助

部署React应用到GitHub Pages后页面空白，React组件无法加载，构建时控制台出现两个错误（错误截图：构建错误截图）。GitHub仓库：My-Portfolio。已尝试Stack Overflow相关方案但无效，未使用任何路由。

相关代码 #

public/index.html #

<!-- w3schools materials css link  -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

    <title>Shivam Ivam</title>
  </head>
  <body>
<div id="root"></div>
  </body>

src/index.js #

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

src/FrontPage.js #

export default function FrontPage() {
  return (
    <div className="container">
    <div className="circle1 circle"></div>
    <div className="circle2 circle"></div>
    <div className="oval oval1"></div>
    <div className="oval oval2"></div>
    <div className="name">
      <span className="im">I'm</span>
      <div className="glitch-wrapper"></div>
      <h1 className="glitch">Shivam</h1>
      <p>A programming student</p>
    </div>  
  </div>
  )
}

src/Navbar.js #

export default function Navbar() {
  function openLeftMenu() {
    document.getElementById("leftMenu").style.display = "block";
  }
  
  function closeLeftMenu() {
    document.getElementById("leftMenu").style.display = "none";
  }
  return (
    <div>    <div className="w3-sidebar w3-bar-block w3-card w3-animate-left" style={{display:'none', zIndex:10}} id="leftMenu">
    <button onClick={closeLeftMenu} className="w3-bar-item w3-button w3-large">Close &times;</button>
    <a href="/" className="w3-bar-item w3-button">Link 1</a>
    <a href="/" className="w3-bar-item w3-button">Link 2</a>
    <a href="/" className="w3-bar-item w3-button">Link 3</a>
  </div>  
    <button className="w3-button hamberg w3-xlarge w3-left" style={{zIndex:9, position:'fixed'}} onClick={openLeftMenu}>&#9776;</button> </div>
  )
}

package.json #

{
  "homepage": "https://github.com/shivam-ivam/My-Portfolio",
  "name": "portfolio",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "gh-pages": "^4.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.3",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

问题排查与解决 #

1. 修正homepage配置 #

package.json中的homepage字段格式错误，GitHub Pages的正确格式为https://<用户名>.github.io/<仓库名>/，修改为：

"homepage": "https://shivam-ivam.github.io/My-Portfolio/"

2. 补全组件导入 #

src/index.js中未导入Navbar和FrontPage组件，这是构建报错的核心原因，添加导入语句：

import Navbar from './Navbar';
import FrontPage from './FrontPage';

3. 重新构建部署 #

执行以下命令重新生成构建文件并部署：

npm run build
npm run deploy

4. 检查资源路径 #

确保所有静态资源（如自定义CSS、图片）使用相对路径，或在public/index.html中使用%PUBLIC_URL%前缀引用资源，避免路径错误导致资源加载失败。

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