Trying to deploy a React app to a *.github.io page; getting "unexpected token: '<'"

Question

I'm trying to deploy a React app to a *.github.io page, and it seems as though something in the process isn't properly getting React to run on the server side - I'm getting a blank page with an error about an unexpected token '<', which suggests to me that React simply isn't being used to interpret the javascript at all.

Here's my package.json:

  "name": "github-pages-page",
  "homepage": "**********.github.io",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^13.5.0",
    "gh-pages": "^3.2.3",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d 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"
    ]
  }
}

I've installed gh-pages through Yarn and am deploying the app through npm run deploy (which runs just fine), and I've pointed Github Pages to the gh-pages branch properly. If I run yarn start in my local copy of the app's top-level directory, it works exactly as expected, so there's nothing wrong with the app itself - the problem is in however Github Pages is running it. What do I need to tweak to get it to run properly?

Answer 1

Removing homepage from your package.json should fix your problem. Here is why:

According to Github docs, Github pages have 3 different types:

• Organization pages
• User pages
• Repository pages

You can only create one user or organization site for each account on GitHub. Project sites, whether owned by an organization or a personal account, are unlimited.

If you create a repo with the name of <username>.github.io it becomes a user page and it seems like that's what you are doing.

Therefore your website root directory becomes <username>.github.io and the links in your index.html should be relative to this path.

Now if you look at your index.html in the gh-pages branch, the links are pointing at /<username>.github.io/* which is incorrent. This is because you set the homepage property in your package.json.

Create-react-app docs:

By default, Create React App produces a build assuming your app is hosted at the server root. To override this, specify the homepage in your package.json