We Keep Coding

React does not update changes, must close the server and run yarn start on every changes made

So, I followed a blog I found online to make React and Express server run on the same port and run using a single command (yarn start). The thing is, after doing some configurations based on the blog, my react app can't do hot reload and doesn't update my changes while editing the code even though I tried to refresh it. I have to close the server down and do yarn start in order to see the updates. I tried to follow some advice from stack overflow like creating .env file but it doesn't work. Can anyone please help??
package.json
{
"name": "react-app",
"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",
"axios": "^1.1.3",
"d3": "^7.6.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start-client": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"start": "yarn run build && (cd server && yarn start)"
},
"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"
]
}
}
I tried creating .env file and putting
FAST_REFRESH = false
and I tried
if (module.hot) {
module.hot.accept();
}
both didn't work.
I expect my react-app to update upon changes made in the vscode

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.

Deployed React app to github pages is blank

I'm following instructions from https://github.com/gitname/react-gh-pages to deploy my react app to github pages.
At the link I'm getting a blank page though and a 404 error:
Failed to load resource: the server responded with a status of 404 ()
My app works on local host
I searched around and its likely my homepage link that is wrong?
link to my repo: https://github.com/PatgioK/pathfindingvisualizer
link to the app: https://patgiok.github.io/pathfindingvisualizer/
here is my package.json:
{
"name": "pathfindingvisualizer",
"version": "0.1.0",
"private": true,
"homepage": "https://patgiok.github.io/pathfindingvisualizer/",
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"gh-pages": "^3.2.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"save-dev": "0.0.1-security",
"web-vitals": "^1.1.2"
},
"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",
"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"
]
}
}

Try specifying the branch in the deploy script by adding -b SomeBranchName in your packages.json.
so:
"scripts": {
...,
"deploy": "gh-pages -d build -b SomeBranchName",
...

Where is your static folder in your repo? This is what your 404 page is complaining about it. I checked your GitHub repo and I don't see either.

Custom react script in package.json is not recognised

I added a custom command to run in my react scripts in my package.json file so that I can run an api server from there
{
"name": "appfrontend",
"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.1"
},
"scripts": {
"start": "react-scripts start",
"start-api": "cd .. && cd appbackend && venv/bin/flask run", # This is the command I added
"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"
]
},
"proxy": "http://localhost:5000"
}
But npm is not recognising this command. What seems to be the issue? Should I not be able to run my new script with
npm start-api

You'd need to use npm run start-api
npm only has a few specific commands it recognizes by default. https://docs.npmjs.com/cli-documentation/cli. Anything else you add to your package, you have to use npm run in order to get npm to recognize it.

React app fails to compile after installing 'node-sass'. How to fix "Module not found" error?

I've built an react.js app which runs fine before installing 'node-sass' using npm install.
The app runs normally in the production build but fails to compile in development build, when using npm start.
This problem doesn't occur with any other package except 'node-sass'
The app worked fine when I imported it to another PC and installed 'node-sass' there.
I tried reinstalling node and npm but to no avail.
I've uninstalled node-sass globally too.
This is my package.json:
"name": "my_app_name",
"version": "0.1.0",
"private": true,
"dependencies": {
"gh-pages": "^2.1.1",
"node-sass": "^4.12.0",
"react": "^16.10.2",
"react-dom": "^16.10.2",
"react-scripts": "3.2.0"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "npm run build && 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"
]
}
}
This is the error message i keep getting:
Failed to compile.
./node_modules/react-dev-utils/formatWebpackMessages.js
Module not found: Can't resolve 'path\to\app\node_modules\babel-preset-react-app\node_modules\#babel\runtime/helpers/slicedToArray' in 'path\to\app\node_modules\react-dev-utils'

install node-sass globally and not as a package.
npm i node-sass