just finished a huge app and tried to deploy it on github but it started throwing 404 errors. I tried to create a fresh new one with just one change in the HTML (just to see that is customized) and it's throwing the same error. The dev version works, the production not.
Here is the error:
DevTools failed to load SourceMap: Could not load content for chrome->
extension://hgmhmanijnjhaffoampdlllchpolkdnj/js/lib/purify.min.js.map:
HTTP error: status code
404, net::ERR_UNKNOWN_URL_SCHEME favicon.ico:1 GET
https://kirilchristov.github.io/favicon.ico 404 manifest.json:1 GET
https://kirilchristov.github.io/manifest.json 404 manifest.json:1
Manifest: Line: 1, column: 1, Syntax error.
Here is a link to the repo: Github Repo
Here is the package.json with the scripts:
{
"home":"https://kirilchristov.github.io/renker",
"name": "gr",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
"scripts": {
"predeploy": "npm run build",
"deploy":"gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
You need three things for CRA to work on gh-pages
A branch with the prod files (default is gh-pages)
✅ You have that (I checked)
Settings enabling gh-pages and select the branch if not default and serve from root
✅ You have that as well, you say
The homepage key inside your package.json
❌ You have home instead of homepage https://create-react-app.dev/docs/deployment#building-for-relative-paths
Try fixing that in your package.json
{
"homepage":"https://kirilchristov.github.io/renker",
"name": "gr",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
"scripts": {
"predeploy": "npm run build",
"deploy":"gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Related
I'm currently trying to deploy my react app toGitHub Pages, but I'm receiving a 404 error or not loading the app. Everything runs fine on my local host. I'm not too sure if this is the problem, but I think I'm not properly calling my app or root from the index.html. Also I'm not sure if this is the problem.
Here is my github page https://github.com/mohbadrus/badrus.github.io
here is my package.json
{
"homepage": "http://badrus.github.io",
"name": "clown-web",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^5.2.3",
"bootstrap-icons": "^1.10.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"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",
"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": "^4.0.0"
}
}
This is my first react app and I am trying to deploy it. When i use npm run build command, it produces all the folders in /build except index.html.
As a result, browser only renders file path on my localhost port.
P.S: I tried my best to find the solution to this issue, ut I couldn't and there is one very close which is related to VUEjs not reactjs
I do use create-react-app
Package.json file
{
"name": "react-task-tracker",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.6.0",
"react-scripts": "5.0.1",
"serve": "^14.1.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"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"
],
"homepage": "."
}
}
I just created React App by "npx create-react-app", and then when I do "npm install redux" or "npm install --save-dev redux" or "npm install --save redux" - it just does not modify the package.json
I tried the same thing with "react-redux", "react-thunk"... And still... The package.json remains the same.
I do not know how to fix this.
Please, help.
"name": "basic_redux_setup",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.8",
"#testing-library/react": "^11.2.3",
"#testing-library/user-event": "^12.6.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"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"
]
}
}
Make sure you are on the right directory while executing the NPM scripts, which must be the same directory where the package.json file is located.
React is installed properly and everything else works, except when I try to run "npm start" in the terminal, it gives me the following error.
Here's my package.json code:
{
"name": "r3-ui",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.2",
"#testing-library/user-event": "^12.2.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"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"
]
}
}
Do not use & when naming the directory on Windows. Rename UI & Web Design into UI_Web_Design. Anything after the & is treated as a command.
After changing the name of the directory run npm start.
I have been trying to install React on my pc using both the methods npx and npm but even then my terminal (VSCode) is throwing this error. I am unable to start my custom react app.
I have checked other responses but I was not satisfied.
My current node version is 12.16.2
My current npm version is 6.14.8
My package.json file is :
"name": "myapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I have been stuck for hours now. Any help is very much appreciated.