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

user_10632369 0
Viewed 1157

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?

github-pages reactjs
2 Answers

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

user_106323690

In my case this error was caused by the fact that the server sent a 404 error page instead of the manifest. In the sources tab of Chrome dev tools click on the file that is your manifest and confirm it's not a error page.

user_185725090
Related