Search code examples
reactjsgithub-pages

Deploying React App To Github Pages Yields Manifest: Line: 1, column: 1, Syntax error

I am trying to host my react application in Github Pages.

I've done the same thing with a Vue based project, and had no issues, but with React, things are different.

I have gone over the following tutorials:

I am able to deploy the application to Github Pages, but am seeing the following error:

Manifest: Line: 1, column: 1, Syntax error.

Error

Yes, my manifest is found inside my public folder and I do not know where the problem originates from. I've tried reading various SO questions relating to this subject, but haven't found anything that is relevant.

I also tried creating a vanilla react project and following the tutorials, but got the same issues.

This is my package.json file:

{
  "name": "Random App Name",
  "homepage": "https://github.com/TomerPacific/projectName",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "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"
    ]
  },
  "devDependencies": {
    "gh-pages": "^3.1.0"
  }
}

What is happening here? Is the problem a configuration issue?

Solution

  • Thanks to @Kibonge Murphy's suggestion, I checked the request url for all the network requests being made and found out that it was wrong.

    Instead of having the URL of the Github page as the homepage key in the package.json file, I put in the URL of the repository.

    Meaning,

    I should have put this : https://tomerpacific.github.io/projectName/

    Instead of https://github.com/TomerPacific/projectName