Have been struggling with dependency issues to no avail. I have built a React app (with typescript). I first added Auth0 authentication which requires React version 16.14.0. This works well despite being a more dated version of React.
Then, I wanted to install Material UI, however this requires React >17.0.0. How can I handle these dependency conflicts?
package.json
{
"name": "23xi-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#auth0/auth0-react": "^1.9.0",
"#testing-library/jest-dom": "^5.16.3",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.4.1",
"#types/node": "^16.11.26",
"#types/react": "^17.0.43",
"#types/react-dom": "^17.0.14",
"#types/styled-components": "^5.1.24",
"add": "^2.0.6",
"react": "^17.0.0",
"react-dom": "^16.14.0",
"react-icons": "^4.3.1",
"react-scripts": "5.0.0",
"styled-components": "^5.3.5",
"typescript": "^4.6.3",
"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"
]
}
}
Related
Whe my react app fails I only can see the error referal to the bundle.js file not to the original component that generate it, so its impossible to me to know which is the source line that generate this error:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#date-io/dayjs": "^2.16.0",
"#emotion/react": "^11.10.4",
"#emotion/styled": "^11.10.4",
"#fontsource/roboto": "^4.5.8",
"#mui/icons-material": "^5.10.9",
"#mui/material": "^5.10.10",
"#mui/x-date-pickers": "^5.0.5",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"dayjs": "^1.11.6",
"formik": "^2.2.9",
"moment": "^2.29.4",
"react": "^18.2.0",
"react-dom": "^18.2.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"
]
}
}
I'm trying to make a typescript frontend but I can't use the react-dom/client import because of an issue that I've narrowed down to my testing-library/react version not corresponding with my react version. I've tried multiple downgraded versions but can't seem to get it to work.
Is there any solutions to this? I'll attach my package.json file below.
{
"name": "balls",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.12.4",
"#material-ui/icons": "^4.11.3",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "12.1.5",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.1",
"#types/node": "^16.11.35",
"#types/react": "^16.8.6",
"#types/react-dom": "^16.8.6",
"#vercel/node": "^1.15.2",
"axios": "^0.27.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "5.0.1",
"typescript": "^4.6.4",
"vercel": "^24.2.3",
"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"
]
}
}
Looking at the peer dependencies of package.json of the version 12 of react-testing-library we can say that until version 12.*, react-testing-library supports any react version before react 18. As of react-testing-library 13, it requires react 18.
So to answer the question, at the time of writing, you can use react-testing-library 12.1.5 with react 16.8.6.
I created this project using npx create-react-app and I'm trying to run a react project using npm start ,it doesn't work on the localhost
but it works on my network, the black cube is just me trying out Three.js on React
here is package.json
{
"name": "project-name",
"version": "0.1.0",
"private": true,
"dependencies": {
"#react-three/drei": "^7.8.5",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/jest": "^26.0.15",
"#types/node": "^12.0.0",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"drei": "^2.2.21",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"react-spring": "^9.2.4",
"react-three-fiber": "^6.0.13",
"sass": "^1.41.1",
"three": "^0.132.2",
"typescript": "^4.1.2",
"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": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I also use typescript for the React app, I'm not sure if that's why or not.
here's the terminal output
Compiled successfully!
You can now view project-name in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.10.106:3000
Note that the development build is not optimized.
To create a production build, use yarn build.
I installed eslint and Prettier in my project and I'm trying to deploy it on heroku
but I still getting error ( failure deploy ).
Failed to compile.
Failed to load plugin 'prettier' declared in 'package.json': Cannot find module 'eslint-plugin-prettier'
Require stack:
- /tmp/build_e0cdc90b/client/node_modules/react-scripts/config/__placeholder__.js
Referenced from: /tmp/build_e0cdc90b/client/package.json
How can I solve this problem ?
package.json file
{
"name": "client",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:8080",
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"antd": "^4.16.13",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"plugin:prettier/recommended",
"prettier"
]
},
"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": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.26.1",
"prettier": "^2.4.1"
}
}
in order to deploy react app on the tomcat server I added homepage in the react app package.json.but after that images disappears from the react page.for image storage i have new folder image folder in the public folder and saved all my images there..and using the path to fetch images '/images/image1.jpg'
here is package.json
{
"name": "reactapp",
"version": "0.1.0",
"private": true,
"homepage": "https://localhost:8080/bunge",
"dependencies": {
"#fortawesome/fontawesome-free": "^5.15.3",
"#testing-library/jest-dom": "^5.11.10",
"#testing-library/react": "^11.2.6",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"bootstrap-icons": "^1.4.1",
"font-awesome": "^4.7.0",
"react": "^17.0.2",
"react-bootstrap": "^1.5.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.3",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-thunk": "^1.0.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"web-vitals": "^1.1.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": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}