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
Related
When I deploy a React app using Cloudflare Pages, the Building application step fails with the error:
error react-scripts#5.0.0: The engine "node" is incompatible with this module. Expected version ">=14.0.0". Got "12.18.0"
error Found incompatible module.
There is no such error when running yarn build or yarn run start on my local machine.
How can this error be fixed?
My package.json:
{
"name": "foobar",
"version": "0.1.0",
"private": true,
"dependencies": {
"#chakra-ui/react": "^1.8.8",
"#emotion/react": "^11",
"#emotion/styled": "^11",
"#supabase/supabase-js": "^1.33.3",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.26.1",
"framer-motion": "^5",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.0",
"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"
]
}
}
Thank you for all your help!
I once encountered this problem and I was able to fix it by specifying the NODE_VERSION environment variable.
In your case, set the environment variable as shown below:
NODE_VERSION = 14.0.0
I'm running a react app using a yarn package manager. I'm getting the aforementioned ESLint error. I have tried the following to fix it:
Deleted package-lock.json and node modules and installed yarn and ran yarn init
Modified the eslint-plugin.js file to include the following at the top of the file:
I used both of these at different times to no avail:
this.CliEngineCtor = require(this.basicPath).CLIEngine;
this.CliEngineCtor = require(this.basicPath).CLIEngineCtor;
Pertinent package.json entry:
{
"name": "react-millionaire-quiz",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "^5.0.0",
"web-vitals": "^2.1.3"
},
"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": "^8.7.0"
},
I tried changing the eslint to lower versions, but that just created other problems breaking other dependencies and creating other errors.
How can this be fixed, or do I have to disable ESLint?
i'm getting this error Attempted import error: 'Outlet' is not exported from 'react-router-dom
if i comment Outlet it throws Attempted import error: 'Switch' is not exported from 'react-router-dom
my package.json is
{
"name": "react-shoe-store-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.11.2",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"axios": "^0.21.1",
"history": "^5.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router": "^6.0.0-beta.0",
"react-router-dom": "^6.0.0-beta.0",
"react-scripts": "4.0.1",
"react-slick": "^0.27.13",
"slick-carousel": "^1.8.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"
]
}
}
i have installed react-router-dom v6 but i can't configure this error
I can't find any info about Outlet, but Switch is exported from react-router and not react-router-dom, see here
import { Switch } from "react-router";
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
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.