GitHub pages unable to load anything from index.html 404 errors - React (CRA) project - Blank page

I created a react repository based on the GitHub codespaces template then I followed the GH documentation on using GitHub pages.
However the website renders a blank page.
During my own research I found out this is most likely due to the index.jsx not loading.
So I added some images which should work but they do not load as well.
When running the project locally it’s working just fine.

These are the errors I am seeing on the GitHub pages site:

project-react/:36 
GET https://dominique8d.github.io/favicon.ico 404 (Not Found)
project-react/:35 
GET https://dominique8d.github.io/project-react/favicon.ico 404 (Not Found)
project-react/:40 
GET https://dominique8d.github.io/src/index.jsx net::ERR_ABORTED 404 (Not Found)
project-react/:38 
GET https://dominique8d.github.io/public/Octocat.png 404 (Not Found)
manifest.json:1
GET https://dominique8d.github.io/manifest.json 404 (Not Found)
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

So I am most likely missing something or targeting the wrong locations.

This is the package.json file:

{
  "name": "codespaces-react",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://dominique8d.github.io/project-react/",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^14.4.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "web-vitals": "^3.1.0"
  },
  "overrides": {
    "@svgr/webpack": "^8.0.1",
    "@adobe/css-tools": "^4.3.1",
    "postcss": "^8.4.31"
  },
  "scripts": {
    "start": "BROWSER=none WDS_SOCKET_PORT=0 vite --port 3000",
    "build": "vite build",
    "preview": "vite preview",
    "test": "vitest"
  },
  "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"
    ]
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.1.1",
    "jsdom": "^22.1.0",
    "vite": "^4.5.5",
    "vitest": "^0.34.6"
  }
}

This is the index.html file:

<!DOCTYPE html>
<html lang="nl">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using @vitejs/plugin-react"
    />
    <link rel="apple-touch-icon" href="/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="/manifest.json" />
    <title>Project React</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
  IMG
  <img src="./favicon.ico"/>
  <img src="/favicon.ico"/>
  <img src="favicon.ico"/>
  <img src="/public/Octocat.png"/>
  TESTUPDATE
  <script type="module" src="/src/index.jsx"></script>
</html>

What I already tried:

I tried changing the homepage variable in the package.json file to "." and other variations of the current value.
Adding the "gh-pages" depdency to the package.json
Changing the location of the index.jsx file: <script type="module" src="./src/index.jsx"></script>
Adding base: "./" to vite.config.js
I tried changing the private variable in the package.json file to false
Adding deploy scripts to package.json even though deploying itself was working out of the box

"predeploy": "npm run build",
"deploy": "gh-pages -d build",

You need to sign in to view this answers

Related Post