I am trying to run the following code in older react version. I am getting errors like cant resolve reactdom/client. I tried to play around with index.js function, then started to get errors like expecting string in index.js line 7 (which is App/) but got obj, etc, etc
I need some hints on how to downgrade the code to React 16 as I am trying to merge with another package which has lots of code in React 16. Any hints, directions to make the code run old react version will be appreciated.
https://github.com/olawanlejoel/react-metamask-ether
below is my package.json dependencies
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"bootstrap": "^4.5.3",
"chart.js": "^2.9.4",
"ethers": "^5.0.18",
"react": "^16.14.0",
"react-chartjs-2": "^2.10.0",
"react-dom": "^16.14.0",
"react-scripts": "^5.0.1"
while the dependencies of the github code are newer versions
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.2.0",
"#testing-library/user-event": "^13.5.0",
"ethers": "^5.6.6",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
Related
I have containerized MERN stack that was created on an old Macbook. I upgraded to a M1 recently, cloned the repo and docker compose up. Everything starts to build but fails to compile on the app portion which gives a blank page. Below is the error:
Failed to compile.
Node Sass does not yet support your current environment: Linux Unsupported architecture (arm64) with Node.js 16.x
ERROR in ./src/Styles/custom.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/Styles/custom.scss)
Module build failed (from ./node_modules/resolve-url-loader/index.js):
Error: resolve-url-loader: error processing CSS
PostCSS received undefined instead of CSS string
at new Input (/usr/src/app/node_modules/resolve-url-loader/node_modules/postcss/lib/input.js:38:13)
at encodeError (/usr/src/app/node_modules/resolve-url-loader/index.js:287:12)
at onFailure (/usr/src/app/node_modules/resolve-url-loader/index.js:228:14)
Pulling up FireFox Web Dev Tools show the following error:
Uncaught Error: Module build failed (from ./node_modules/resolve-url-loader/index.js):
Error: resolve-url-loader: error processing CSS
PostCSS received undefined instead of CSS string
at new Input (/usr/src/app/node_modules/resolve-url-loader/node_modules/postcss/lib/input.js:38:13)
at encodeError (/usr/src/app/node_modules/resolve-url-loader/index.js:287:12)
at onFailure (/usr/src/app/node_modules/resolve-url-loader/index.js:228:14)
scss bundle.js:83257
factory react refresh:6
Webpack 19
I thought a package was causing the issue because I had node-sass": "^4.14.1 but I removed it and replaced it with "sass": "^1.55.0" and "sass-loader": "^13.1.0"
In addition, Firefox can’t establish a connection to the server at ws://localhost:3000/ws. Its probably related to the issue with Sass, but its hard to determine how to fix this.
My package.json
{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#hcaptcha/react-hcaptcha": "^1.4.4",
"#material-ui/core": "^4.12.4",
"#material-ui/icons": "^4.11.3",
"#material-ui/styles": "^4.11.5",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^14.4.3",
"aws": "0.0.3-2",
"axios": "^1.1.3",
"bootstrap": "^5.2.2",
"chart.js": "^3.9.1",
"js-cookie": "^3.0.1",
"sass": "^1.55.0",
"sass-loader": "^13.1.0",
"react": "^18.2.0",
"react-bootstrap": "^2.5.0",
"react-chartjs-2": "^4.3.1",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.2",
"react-scripts": "5.0.1",
"react-toastify": "^9.0.8",
"styled-components": "^5.3.6"
},
Any help you can provide would be greatly appreciated.
Currently I'm doing a React JS course but it seems a bit outdated with some things. Currently I'm trying to implement the React Router within my code. I'm getting the error:
ERROR in ./src/App.js 7:0-51
Module not found: Error: Can't resolve './react-router-dom'
Although when I checked my package.json and also the route of the dir under the node modules, it's there. I tried also to use a different version from the react-router-dom in order to make it work, I tried with other computers as well but it is not.
I tried to uninstall npm modules and reinstall them again.
Other options I've tried:
npm i react-router-dom
npm install react-router-dom#5.3.4 and 4.2.2
I'm addding some screenshots about where is it called, node modules and relevant info.
Here you have my JSON package file dependencies info:
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^4.6.0",
"bootstrap-social": "^5.1.1",
"font-awesome": "^4.7.0",
"node-modules": "^1.0.1",
"react": "^18.2.0",
"react-bootstrap": "^2.5.0",
"react-dom": "^18.2.0",
"react-popper": "^2.3.0",
"react-router-dom": "^5.3.4",
"react-scripts": "5.0.1",
"reactstrap": "^8.0.0",
"web-vitals": "^2.1.4"
When you add ./, you're telling React to look inside a path instead of calling the node module, you must remove ./ from the import sentence and use just react-router-dom instead.
Why i'm getting this error?
Warning: Using UNSAFE_componentWillMount in strict mode is not
recommended and may indicate bugs in your code. See
https://reactjs.org/link/unsafe-component-lifecycles for details.
Move code with side effects to componentDidMount, and set initial state in the constructor.
Please update the following components: SideEffect(NullComponent)
The app was working fine, went for few hours and came back found it giving me this error! one solution I found is removing I removed it and the error went away, but the api i'm using didn’t work, so i'm looking for another solution!
"dependencies": {
"#emotion/styled": "^11.10.4",
"#mui/icons-material": "^5.10.9",
"#mui/lab": "^5.0.0-alpha.103",
"#mui/material": "^5.10.9",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^1.1.2",
"font-awesome": "^4.7.0",
"gapi-script": "^1.2.0",
"html-react-parser": "^3.0.4",
"jwt-decode": "^3.1.2",
"react": "^18.2.0",
"react-cookie": "^4.1.1",
"react-dom": "^18.2.0",
"react-helmet": "^6.1.0",
"react-router-dom": "^6.4.2",
"react-scripts": "^5.0.1",
"sanitize-html": "^2.7.2",
"web-vitals": "^2.1.4"
},
For API call use "componentDidMount"
If it not help then need to see your code snapshot in order understand what is going on.
I have React application.
I updated Node.JS from v12 to v14 for reasons to use React v17.
And after that some tests stopped working.
When i run tests i got this error
In tests i have this part, it worked before update Node:
Part of my dependencies that i think important to show:
"#testing-library/jest-dom": "5.16.2",
"#testing-library/react": "12.1.3",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-scripts": "5.0.0",
"pptxgenjs": "3.9.0",
I'm using MUI for a react project and intellisense is giving me problems when it comes to speed. Suggestions won't show up for up to 4-5 seconds and I'm guessing MUI's massive library has something to do with it. Is there a way to disable intellisense for MUI specifically? If not, are there any more ways I can speed up intellisense?
package.json
"dependencies": {
"#emotion/react": "^11.5.0",
"#emotion/styled": "^11.3.0",
"#mui/icons-material": "^5.0.5",
"#mui/material": "^5.0.6",
"#testing-library/jest-dom": "^5.15.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.24.0",
"chart.js": "^3.6.0",
"react": "^17.0.2",
"react-chartjs-2": "^3.3.0",
"react-dom": "^17.0.2",
"react-reveal": "^1.2.2",
"react-router": "^6.0.1",
"react-router-dom": "^6.0.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
}
Try importing directly from the component, rather than the whole library. I have found as long as no components are imported from the whole library, imports in a file are much faster.
You should import it like this
import Tab from '#mui/material/Tab';
instead of:
import {Tab} from '#mui/material';
They might look similar, but the second one is importing the whole library and then extracting the Tab component, instead of just getting the component at once. That should help with performance.
Maybe using this extension is useful.