React Github Pages Deploy ERR_ABORTED 404 (Not Found)

Question

I'm trying to deploy my create-react-app here But I'm getting these error. static/css/1.e03ed13c.chunk.css net::ERR_ABORTED 404 (Not Found). I have no any chunk.css file. What is a problem? Can you help me?

My package.json

{
  "homepage": "http://ebrugulec.com/image-text-detection",
  "name": "image-text-detection",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "filepond": "^3.5.0",
    "filepond-plugin-image-preview": "^3.1.4",
    "react": "^16.6.3",
    "react-autosize-textarea": "^5.0.1",
    "react-dom": "^16.6.3",
    "react-dropzone": "^7.0.1",
    "react-filepond": "^5.0.0",
    "react-scripts": "2.1.1",
    "superagent": "^4.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "gh-pages": "^2.0.1"
  }
}

Answer 1

I solved this issue by adding

"homepage" : "https://myblog-url",

in 'package.json' file in my react-app project directory

xxx.chunk.js and xxx.chunk.css file is in 'build/static/' directory

and when I went to network tab of developer tools of chrome and saw the exact error messages,

I was able to find url my browser was going to access, and in my case, the url of my blog was different from what I meant to be.

Answer 2

I was able to resolve the problem by adding Adding "homepage": "." to package.json.

Answer 3

If adding . to "homepage": "." in package.json not working then this answer will help you.

I have checked my developers console and my first indication was, where is this build folder which is throwing error.

Step 1: (optional, if your build folder is already committed, then skip this step) First commit your build folder, if that is not committed.

To commit build folder:

• First remove the reference of build folder from your .gitignore
• Then add your folder and commit

Sample: my folder path of build folder is covidresources -> build. (note: git add . is just to include other files as well, if any)

git add covidresources/build
git add . 
git commit -m "added build files"
git push

Just verify if your build files are now committed.

Step 2: Now, we will pick one file and compare the path of the file in repository and the path of the file in developers console (the file which was throwing error).

• Initially I have "homepage": "." in package.json.
• Pick any error from console, like in my case, I have picked the path of this file: 2.6770f89d.chunk.js from console

https://kushalseth.github.io/kushalseth/mycovid/blob/main/covidresources/static/js/2.6770f89d.chunk.js

• Search the same file path in repository.

• Now compare the two paths:

SOLUTION:

• Replace, "homepage": "." with the path, something like this: (the screenshot of actual and file path will help to make this url. Just removed the name of user, and added repository name after github.com)

"homepage": "https://github.com/mycovid/"

• Deploy and commit your files. Our main aim is to commit build/asset-manifest.json file.

npm run deploy
npm add .
npm commit -m "committing manifest"
npm push

Your manifest file should look like this: (repoitoryname/static).

It is important that your server manifest file is updated and It's also important to verify the path in manifest. We donot change anything manually in manifest. it gets updated automatically by npn run deploy and package should have correct homepage.

Refresh your page, and in networks of developers console, the success path will come like this:

https://kushalseth.github.io/mycovid/static/js/2.6770f89d.chunk.js

Answer 4

Adding the below property in the package.json will solve this problem.

"homepage": "."