Change of window focus when developping with react - javascript

I have a setup using react. When i run yarn start, i can start coding and changes are visible in my browser. Problem is, every 10 secons or so my terminal wants to let me know about error in mycode and always change my focus back to my editor within the specific file where the error would be. it is so annoying and frustrating. I guess it has something to do with eslint. I tried looking at the doc and even erased the eslinrc.json file but still persist with the same behavior. Is there any way to stop that behavior.
here is my package.json
{
"name": "korean-recipes",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.9.5",
"#material-ui/icons": "^4.9.1",
"#reduxjs/toolkit": "^1.2.5",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0",
"redux": "^4.0.5"
},
"scripts": {
"lint": "yarn run start",
"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": {
"eslint": "^6.8.0",
"eslint-config-google": "^0.14.0",
"eslint-plugin-react": "^7.19.0"
}
}

I found the problem. It is a behavior create by 'npx create-react-app' by default.
To remove the behavior, simply add a .env file with the following variable:
REACT_EDITOR=none
Source: https://create-react-app.dev/docs/advanced-configuration

Related

I am getting a 404 error page after deploying my react app on Github (help please)

So I followed the steps on installing gh-pages and deploying my project onto github. However, my github page is giving me a 404 error and gave me this message:
"If this is your site, make sure that the filename case matches the URL.
For root URLs (like http://example.com/) you must provide an index.html file".
I have been googling around and nothing comes up.
I even switch the branch to gh-pages, but the page comes out blank.
Here is my package.json file:
{
"name": "dessert-menu",
"version": "0.1.0",
"homepage": "https://aaronv-github.github.io/DessertMenu/",
"private": true,
"dependencies": {
"-": "^0.0.1",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.1.1",
"#testing-library/user-event": "^13.5.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "^5.0.1",
"save": "^2.5.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -b master -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"
]
},
"devDependencies": {
"gh-pages": "^4.0.0",
"react-router-dom": "^6.3.0"
}
}

Why getting invalid hook call error in my locally hosted website?

I am getting the following error:
bundle.js:117850 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
I dont seem to have made any errors as mentioned in console.cant figure out whats happening.
My package.json file:
{
"name": "hackervatsal",
"version": "0.1.0",
"private": true,
"dependencies": {
"#chakra-ui/react": "^1.8.8",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.2.0",
"#testing-library/user-event": "^13.5.0",
"firebase": "^9.8.1",
"framer-motion": "^6.3.3",
"react": "^18.1.0",
"react-bootstrap": "^2.3.1",
"react-dom": "^18.1.0",
"react-icons": "^4.3.1",
"react-router-dom": "^6.3.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"
},
"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"
]
}
}
is the version of react and react-dom conflicting in my case? any help is appreaciated

npm start not working | Not Loading React Application

npm start command not progressing after below point -
Application is not getting loaded due to this.
Below is package.json -
{
"name": "reacttest",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.12.1",
"#material-ui/data-grid": "^4.0.0-alpha.33",
"#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-facebook-login": "^4.1.1",
"react-google-login": "^5.2.2",
"react-redux": "^7.2.4",
"react-scripts": "4.0.3",
"redux": "^4.1.0",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "set HTTPS=true&&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"
]
}
}
Windows (cmd.exe)
set HTTPS=true&&npm start
Windows (Powershell)
($env:HTTPS = "true") -and (npm start)
Linux, macOS (Bash)
HTTPS=true npm start
add variable in .env
REACT_APP_HTTPS = true
and in script
"scripts": {
"start": "react-scripts start",
....
}
then run npm start and see.

Problem with proxy property in package.json (react)

I've added the proxy property in package.json that is pointing to http://localhost:8080/ becouse I want to connect my node.js backend with my react frontend. However after setting this, my react app starts on the port 8080 or on whatever port I set in the proxy in package.json. What I'm doing wrong? I would like to start my react app on port 3000 and leave the port 8080 free for the node backend.
Here is my whole package.json file:
{
"name": "restaurants-portfolio-project",
"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",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"mongodb": "^3.6.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3",
"react-select": "^3.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"dev:server": "nodemon ./backend/server.js"
},
"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:8080/"
}

Create React App builds empty document (blank screen) with react-router and firebase?

I get a white screen on my deployed react webapp, it worked perfectly before. I tried everything I could find here but it didn t worked.
Below is the link to my website : https://numbr-d1a20.firebaseapp.com/
Change the homepage, look for error in the console, clear my cache and a lot more...
Below is my package.json
{
"name": "numbr",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.3.1",
"express": "^4.17.1",
"firebase": "^6.3.4",
"mysql": "^2.17.1",
"node-sass": "^4.12.0",
"nodemon": "^1.19.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-native-indicators": "^0.13.0",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.1",
"recompose": "^0.30.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"
]
}
}
I expect to see my sign in page and not a blank screen.
Thanks in advance for your help!
The const 'condition' in the connectScreen component is undefined. Your authentication logic then prevents the component from rendering. Test what happens when you set const condition = true and see if it works then.

Categories