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"
  }
}

https://medium.com/@_mariacheline/deploy-create-react-app-project-to-github-pages-2eb6deda5b89 — SakoBu, Dec 15 '18 at 21:38
I guess, one thing you might be missing is correcting your `homepage` in `package.json`. Also, chunk.css is generated. — sudo bangbang, Dec 21 '18 at 12:13
I edited my question and I added a package.json file. @sudobangbang — Ebru Gulec, Dec 22 '18 at 15:12
I didn't solved corretly this problem. But I realized something. if i deploy github pages firstly, github pages not working. Hovewer if I send current pull request on github, after that i deployed gh-pages. It's working corretly. I don't know. Sometimes gh-pages not working very well. @kuka — Ebru Gulec, Feb 25 '19 at 18:52

Wood · Answer 1 · 2019-05-19T04:45:33.027

7

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.

edited May 19 '19 at 04:45

answered May 19 '19 at 04:28

Wood

422
7
15

2

Adding `"homepage": "."` to `package.json` worked for me. – Klyner Aug 13 '20 at 13:39

score 7 · Answer 2 · edited Sep 01 '20 at 13:11

7

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

edited Sep 01 '20 at 13:11

Arghya Sadhu

41,002
9
78
107

answered Sep 01 '20 at 12:42

jake

154
2
9

KushalSeth · Answer 3 · 2021-05-03T22:41:35.947

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

score 0 · Answer 4 · answered May 13 '22 at 13:22

0

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

"homepage": "."

answered May 13 '22 at 13:22

Muthu

87
2
9

React Github Pages Deploy ERR_ABORTED 404 (Not Found)

4 Answers4

Linked