React Component not reload in browser after save the changes in localhost - reactjs

I created a new react project using Create-React-App. In the old projects, Whenever I did the changes in the component and save the component it will reflect in the browser, but in the new project when I saved the changes in the code the browser did not reload and not reflect the changes. So I stopped the running process and again giving the npm start
Here is my package.json file.
{
"name": "new-application",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^7.1.3",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"redux": "^4.0.5"
},
"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": {
"redux-devtools": "^3.5.0",
"webpack": "^4.41.5"
}
}
Can I add something in package.json to reload the browser automatically whenever I done changes?

I had a similar (or event the same) problem and I changed starting command in the package.json file by adding following flags: --watch --watch-poll to the webpack-dev-server:
{
//...
"scripts": {
"start": "webpack-dev-server --env.ENVIRONMENT=development --content-base src/ --mode development --watch --watch-poll",
// ...
}
// ...
}
Now, using npm start and then changing src files I can see changes in the browser.
Please here https://webpack.js.org/configuration/watch/ for more options.

Install your app again using :
npx create-react-app appname
And don't edit package.json

If you prefer not modifying the package.json you can reinstall your project.
Two ways for that.
With git:
Push your project on git
Clear the project's folder on your computer
git clone https://github.com/my-account/my-project.git
npm install
Without git:
Back up the content of your project except for node_modules
Clear the project's folder except for package.json
npm install
Paste the files you backed up

Related

Uncaught ReferenceError: process is not defined at ./node_modules/process-nextick-args/index.js

Here is my package.json:
{
"name": "new-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": "^14.4.3",
"buffer": "^6.0.3",
"dotenv": "^16.0.3",
"guardian-wallet": "^0.0.6-rc.30",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^5.0.1",
"web-vitals": "^3.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"preinstall": "npx npm-force-resolutions"
},
"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": {
"react-error-overlay": "^6.0.11"
},
"resolutions": {
"//": "See https://github.com/facebook/create-react-app/issues/11773",
"react-error-overlay": "6.0.9"
}
}
My app.js :
import logo from './logo.svg';
import './App.css';
import GuardianWallet from "guardian-wallet";
I have tried many the solutions I came across nothing helped:
I have tried upgrade react-scripts to its latest version.
Tried npm install --save-dev react-error-overlay#6.0.9 --force.
Tried adding resolution.
Deleted node_modules and package.lock.json and then used npm cache clean --force and then
did npm install.
process is a Node.js global; process is not defined in a React application most likely means that you're trying to use an NPM package that was written for Node.js, not a browser environment.
Depending on your specific environment and needs, there are a few approaches you could take to fix it: You could replace the NPM package that you're using with one that's written for browsers, or submit a request or PR to add browser support to the NPM package you're using, or set up polyfills in your bundler (see, e.g., here).

404 error after adding custom domain to deployed reactjs app hosted by github pages

I've created a reactjs app and I deployed it to github pages with the command npm run deploy this all works great and I can see my app running when i open it from the
settings>pages in my repo. However, I am trying to add a custom domain and this is causing me trouble. I configured the IPs and everything for the DNS according to gh-pages documentation and the DNS checks all pass when i add the domain name. But when i go to the domain in my browser I get all 404 errors like this:
Im thinking it could be something wrong with my package.json, I was thinking I need to change the "homepage" value to my new domain instead of the http://<Github-username>.gihub.io/<repoName>/ I set it to when i deployed the app? Ive tried this but it doesnt work to load the page at that url.
So Im wondering if anyone has run into this issue after deploying to gh-pages and then adding a custom domain?
this is my package.json:
{
"homepage": "http://CRJones7.github.io/learned/",
"name": "learned",
"version": "0.1.0",
"private": true,
"dependencies": {
"#primer/octicons-react": "^17.9.0",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^5.2.3",
"jquery": "^3.6.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.4",
"react-scripts": "5.0.1",
"reactstrap": "^9.1.5",
"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": {
"gh-pages": "^4.0.0"
}
}
I figured out the solution, I just needed to re-deploy my page with
npm run deploy

Blank page when deploying react-table on github pages

I am making simple react.js app using react-table.
I tried to run it locally using npm start and it is working fine.
But when I tried to deploy it on github pages, it just shows a blank page. I have followed all the steps for deploying react app on gh pages.
Here is the gh repository : https://github.com/7phalange7/react-table
the main branch has the project code, and gh-pages branch is deployed on github pages.
Should there be a problem deploying react-table on github pages ?
package.json for reference
{
"name": "react-table-example",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "^4.0.3",
"react-table": "^7.7.0",
"web-vitals": "^1.1.2",
"homepage": "https://7phalange7.github.io/react-table/"
},
"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": "^3.2.3"
}
}
Edit :
still not sure what is the issue here, but I copied all the code to a new react project and then deployed on github pages and it is working fine now. I guess since this was the first time deploying react project, somehow I messed up something.
try changing the private to 'false' in your package.json

no service-worker.js file after npm run build in react

After running npm run dev no service-worker.js file in build folder.
I'm also changed serviceWorker.register() in index.js
I'm also using firebase in this project.
Here is package.json file
{
"name": "movie",
"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",
"axios": "^0.20.0",
"email-verifier": "^0.4.1",
"firebase": "^7.24.0",
"history": "^5.0.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-lottie": "^1.2.3",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.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": {
"#types/react-router-dom": "^5.1.6"
}
}
After deploy in firebase ,I got this error.
serviceWorker.js:97
Error during service worker registration: DOMException: Failed to register a ServiceWorker for scope ('https://.web.app/') with script ('https://*.web.app/service-worker.js'):
The script has an unsupported MIME type ('text/html').
I had the same problem, and solved following these steps in GitHub issue:
It happened after create-react-app upgraded to version 4.x.
The "fix" was to create a dummy app:
npx create-react-app my-app --template cra-template-pwa-typescript
And copy over the relevant code:
reportWebVitals.ts
service-worker.ts
serviceWorkerRegistration.ts
And don't forget the initialization code in index.tsx.
The serviceWorker.js provided by Create React App is only there to register a service worker file ( say sw.js ). Try the following steps and see if it works:
Create a sw.js file (this file will hold the logic for your service worker) inside the 'public' folder.
Open the serviceWorker.js provided by Create React App and go the definition of the function register.
Follow the code, and go to the line where it registers the service worker. It might be along the lines of
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register('/path/to/sw.js').then()
}
Here change the /path/to/sw.js to the file you created in the 'public' directory as /sw.js. This corresponds to hostname.com/sw.js
Do this and the service worker might get registered. Things become more complicated from here.
GlHf

react.js & tailwind.css project not deploying to heroku properly

I have a create-react-app that I have successfully gotten up and running on my localhost, with all of the features of tailwind.css available for me to integrate with my JSX. It compiles fine and I used this tutorial to accomplish this: https://codingthesmartway.com/using-tailwind-css-with-react/.
An example of an error, commas representing new console log lines, is: npm ERR! react-tailwindcss#0.1.0 build:css: postcss src/styles/tailwind.css -o src/styles/main.css, npm ERR! spawn ENOENT, npm ERR!, npm ERR! Failed at the react-tailwindcss#0.1.0 build:css script. I used heroku logs --tail to get this information. I am at a loss as to how to fix this issue. This is the app: https://peaceful-island-18911.herokuapp.com/. It should look like (and does on my localhost) the end result of the tutorial mentioned. I know there has to be a way to get a react w/ tailwindcss app deployed to heroku and function as it does on localhost. I have done it before using the more common css framework bootstrap.
Below is my package.json file with my scripts and dependencies. I followed the tutorial I mentioned above for my file architecture. I am a newer dev so please go easy on me but any help or guidance in solving this issue will be greatly appreciated. I really hope this is a simple fix beginner mistake! Thank you.
{
"name": "react-tailwindcss",
"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.1"
},
"scripts": {
"start": "npm run build:css && react-scripts start",
"build": "npm run build:css && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build:css": "postcss src/styles/tailwind.css -o src/styles/main.css",
"prebuild": "npm run build:css",
"prestart": "npm run build:css"
},
"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": {
"autoprefixer": "^9.8.6",
"postcss-cli": "^7.1.1",
"tailwindcss": "^1.6.2"
}
}

Resources