We Keep Coding

React application returning an empty div when deployed on github pages

I have been working on deploying the website I am working on to github pages but It seems to return an empty div when deployed. when served with npx serve build it displays all information fine, and is displays on local host normally but just returns a blank div when deployed on github pages.
steps I took to deploy:
installed gh-pages
added "homepage" to package.json
npm run deploy
The package.json code is listed below incase there is an error in there
{
"homepage": "https://jonlev03-hub.github.io/media-pilot/",
"name": "media-pilot",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.2.0",
"#testing-library/user-event": "^13.5.0",
"gh-pages": "^4.0.0",
"package.json": "^2.0.1",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"web-vitals": "^2.1.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": {
"github-pages": "^0.1.0"
}
}
and if you can't find any issues in that block of code all the code for the site is located inside my repository at github.com/jonlev03-hub/media-pilot .

This was an issue relating to the use of I hadn't specified a baseurl for the router to work with.

Creating an optimized build freezes and never completes

I am trying to build my react app. But when I run "npm run build", The terminal freezes on "Creating and optimized production build..." and never finish.
This is my JSON file. I tried on 16 GB ram also.
I have deleted package lock file and also rebuild the dependencies. But it remains same.
There is no specific solution anywhere, if anyone has solution please let me know.
{
"name": "demoapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/react": "^11.4.1",
"#emotion/styled": "^11.3.0",
"#material-ui/core": "^4.12.2",
"#material-ui/data-grid": "^4.0.0-alpha.33",
"#material-ui/lab": "^4.0.0-alpha.60",
"#mui/material": "^5.0.3",
"#progress/kendo-drawing": "^1.16.0",
"#progress/kendo-licensing": "^1.2.1",
"#progress/kendo-react-pdf": "^4.12.0",
"#progress/kendo-theme-material": "^4.43.0",
"#progress/kendo-ui": "^2021.3.1109",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"axios": "^0.21.1",
"bootstrap": "^5.0.2",
"chart.js": "^3.5.0",
"dom-to-pdf": "^0.2.2",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.9.1",
"html-to-draftjs": "^1.5.0",
"pdf-viewer-reactjs": "^2.2.3",
"react": "^17.0.2",
"react-app-polyfill": "^2.0.0",
"react-chartjs-2": "^3.0.4",
"react-csv": "^2.0.3",
"react-dom": "^17.0.2",
"react-draft-wysiwyg": "^1.14.7",
"react-hook-form": "^7.10.1",
"react-icons": "^4.2.0",
"react-loader": "^2.4.7",
"react-loader-spinner": "^4.0.0",
"react-modal-video": "^1.2.8",
"react-redux": "^7.2.4",
"react-responsive-carousel": "^3.2.21",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"react-table": "^7.7.0",
"reactstrap": "^8.9.0",
"redux": "^4.1.0",
"redux-thunk": "^2.3.0",
"sweetalert2": "^11.0.18",
"web-vitals": "^1.0.1"
},
"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": [
"ie 11",
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Check to see if you have a local server running in another terminal (eg. localhost:3000 ).
If you do, end that server instance by terminating the batch job (with Ctrl+C) and try running npm run build again.

I recently had this issue. Check your package.json for react-scripts, if the version is <5.0.0 upgrade it to at least "react-scripts": "5.0.0".
Do a yarn install or npm install again, then yarn build or npm run build as the case may be.
Let me know if this works for you! Cheers!

If the process is stuck, it could be due to a lack in computing resources.
I would recommend investigating the currently running processes.
Try running sudo htop on a different terminal window and then run sudo npm run build.
You might find another process is taking too much memory, causing the build process to hang.
You may need to kill or restart such processes to complete the build.
It would be a good idea to check why those processes take so much memory, but that's besides the topic.

How to fix issue where I'm getting thousands of errors from prettier in my React App?

I am encountering this issue where prettier is giving me in excess of 1000 errors. I'm not sure what is causing it however here is how I got to this issue. I followed TraversyMedias guide on youtube to install eslint and prettier with the airbnb template. It was working great. I programmed for close to a day with it. Then after I started switching a component I had from React hooks state to Redux state I got an error saying that a file couldn't be found. After I fixed the issue it still was coming up with this error. I restarted my dev server and got a different error entirely it was an issue with the version of eslint i had. I can't remember the specific error but it was something along these lines "The react-scripts package provided by Create React App requires a dependency: "eslint": "^7.11.0". " After I got that error I followed these steps
To fix the dependency tree, try following the steps below in the exact order:
Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
Delete node_modules in your project folder.
Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
Run npm install or yarn, depending on the package manager you use.
after I did that I encountered the error I am asking the question about.
some useful information My project structure is a top level project folder. it contains both my server and client folder and all three have their own package.json.
I look on this forum for someone with an error similar to mine and couldn't find any.
I googled many different worded questions about this issue and can't find anything on it.
I uninstalled prettier to see if it would go away. it didn't
here is what my package.json looks like in this order root folder client folder and server folder
{
"name": "sac-website",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "concurrently \"cd server && npm run dev\" \"cd client && npm start\" "
},
"author": "",
"license": "ISC",
"devDependencies": {
"concurrently": "^6.2.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^1.7.0"
},
"dependencies": {
"eslint": "^7.28.0",
"eslint-config-node": "^4.1.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^3.4.0"
}
}
{
"name": "sac-web",
"version": "0.1.0",
"private": true,
"dependencies": {
"#date-io/date-fns": "^1.3.13",
"#material-ui/core": "^4.11.4",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.58",
"#material-ui/pickers": "^3.3.10",
"#material-ui/styles": "^4.11.4",
"#reduxjs/toolkit": "^1.6.0",
"#testing-library/jest-dom": "^5.12.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.21.1",
"date-fns": "^2.22.1",
"eslint": "^7.28.0",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-toastify": "^7.0.4",
"redux": "^4.1.0",
"redux-thunk": "^2.3.0",
"web-vitals": "^0.2.4",
"workbox-background-sync": "^5.1.4",
"workbox-broadcast-update": "^5.1.4",
"workbox-cacheable-response": "^5.1.4",
"workbox-core": "^5.1.4",
"workbox-expiration": "^5.1.4",
"workbox-google-analytics": "^5.1.4",
"workbox-navigation-preload": "^5.1.4",
"workbox-precaching": "^5.1.4",
"workbox-range-requests": "^5.1.4",
"workbox-routing": "^5.1.4",
"workbox-strategies": "^5.1.4",
"workbox-streams": "^5.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"
]
},
"devDependencies": {
"eslint-plugin-react": "^7.24.0"
}
}
{
"name": "server",
"version": "1.0.0",
"description": "The server for the sac website",
"main": "index.js",
"scripts": {
"start": "node app.js",
"dev": "nodemon app.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"bcrypt": "^5.0.1",
"cors": "^2.8.5",
"dotenv": "^10.0.0",
"express": "^4.17.1",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.12.11"
},
"devDependencies": {
"nodemon": "^2.0.7"
}
}
Any help you guys could give me would be fantastic. And please pardon me if I asked this question wrong. It is my first time asking any question on a programming forum.

The error I was getting had something to do with how eslint was set up or how prettier was set up. I deleted everything that was related to that and now the project is working.

In a React 17 project I wanted to run, there were 2 .ignore files: .prettierignore and .eslintignore.
I added the src folder to these files and with that the errors disappeared.
This way you don't have to remove everything, and you can leave it to address it at a later time if you want.

create-react-app is deployed on Heroku but page is blank

I'm trying to deploy a react app on heroku but after deploying it on heroku its showing blank page,I've also created this app using buildpack mars/create-react-app
This is what I'm getting on deployed project:
Here's my package.json file:
{
"name": "covid-19",
"version": "0.1.0",
"private": true,
"homepage": "covid-19-stats-by-anny-v3",
"dependencies": {
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.9.1",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"express": "^4.17.1",
"fetch": "^1.1.0",
"gh-pages": "^3.1.0",
"material-table": "^1.65.0",
"mui-datatables": "^3.3.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-social-icons": "^4.1.0"
},
"scripts": {
"start": "react-scripts start",
"predeploy": "npm run build",
"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"
]
},
"devDependencies": {
"react-scripts": "^3.4.1"
}
}

The reason behind this white screen is JavaScript files are loaded into the browser.
There is the publicPath setting in your Webpack configuration to tell an app what its root path is. In our example, that would be https://www.yourwebsite.com/
If set correctly, it will base links like above from that URL – and your application will load like expected.
Put this information is package.json file add these lines after version in package.json
"homepage":"your app link"
and build the application again it will work.

Unable to start a nodejs app on ubuntu 20.0.4

I just moved to ubuntu recently and I tried running a node app with the usual way git clone > npm i but I am having this error back when I try to run it.
It is a create-react-app app
Also it was running smoothly in wsl2
error:
Failed to compile.
./src/pages/Main/main.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/pages/Main/main.scss)
Error: /snap/core/current/lib/x86_64-linux-gnu/libm.so.6: version `GLIBC_2.29' not found (required by /home/bihire/development/react/ikaze_web_app/node_modules/node-sass/vendor/linux-x64-84/binding.node)
package.json
{
"name": "ikaze_web",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.9.14",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.54",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"draft-js": "^0.11.6",
"history": "^4.10.1",
"leaflet": "^1.6.0",
"material-ui-chip-input": "^2.0.0-beta.2",
"modernizr": "^3.11.2",
"node-sass": "^*",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-measure": "^2.3.0",
"react-parallax": "^3.0.3",
"react-redux": "^7.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"react-sizeme": "^2.6.12",
"react-text-mask": "^5.4.3",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-state-sync": "^3.1.1",
"redux-thunk": "^2.3.0",
"text-mask-addons": "^3.8.0"
},
"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"
]
},
"devDependencies": {
"#iconify/icons-mdi": "^1.0.105",
"#iconify/react": "^1.1.3"
}
}
from my eyes it seems to be problem with node-sass but I am not sure
Is there some thing I should do to fix that?

This problem can occur with native (i.e. compiled, non-Javascript) npm modules when you install Node using the Ubuntu software manager.
For example, Ubuntu 20.04 comes with a system version of glibc 2.31.
However when you install the current latest version of Node via the Ubuntu software manager, it comes as a Snap package which also installs dependency package core containing glibc 2.23, and it is this one that your system version of Node will use (hence the path beginning /snap/core/current/lib/ in the error message, instead of just /lib/). Unfortunately, when you install native modules and the bindings are either downloaded or compiled locally for your system, the versions of the dependencies that the Snap package version of Node will be using are not taken into account, hence the error.
You should find that if you download the same version of Node from nodejs.org and run that binary instead of the system version from the Snap package then you won't get the error.
The solution is therefore not to install Node from the Ubuntu software manager. Use nvm or manual install instead.