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",
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.
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"
},
I recently moved my react repo into a single mono repo under /client. I installed the node_modules using yarn install when in /client
VS code intellisense is suggesting that I import from hoist-non-react-statics/node_modules/#types/react instead of from react when importing react hooks like useEffect and useRef. This leads to the below error when I compile using yarn start
Module not found: Can't resolve 'hoist-non-react-statics/node_modules/#types/react' in
I don't have 'hoist-non-react-statics' as a dependency in my package.json. My package.json dependencies are below:
"dependencies": {
"#auth0/auth0-react": "^1.6.0",
"#hookform/resolvers": "^2.7.1",
"#reduxjs/toolkit": "^1.6.1",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"#types/jest": "^24.0.0",
"#types/node": "^12.0.0",
"#types/qs": "^6.9.7",
"#types/react": "^16.9.0",
"#types/react-dom": "^16.9.0",
"#types/react-redux": "^7.1.7",
"#types/react-slider": "^1.3.1",
"#types/react-table": "^7.7.2",
"clsx": "^1.1.1",
"final-form": "^4.20.2",
"final-form-calculate": "^1.3.2",
"lodash": "^4.17.21",
"qs": "^6.10.1",
"rc-checkbox": "^2.3.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-final-form": "^6.5.3",
"react-hook-form": "^7.12.2",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-slider": "^1.3.1",
"react-table": "^7.7.0",
"react-truncate": "^2.4.0",
"typescript": "~4.1.5",
"yup": "^0.32.9"
},
It seems to be an issue with the #types relating to react. I filed an issue on the react-redux github repo.
yarn upgrade #types/react fixes it. For good measure, all of the packages should probably be upgraded with yarn upgrade --latest or just all of the types with yarn upgrade --latest --pattern "#types"
https://github.com/reduxjs/react-redux/issues/1806
After downgrading/upgrading VSCode and TypeScript versions I found out that this problem happens with the latest TypeScript versions (tested with 4.4.2, but could exist in whole 4.4.x branch). The problem does not seem to exist in 4.3.5. What you could do is the following:
Update VSCode to the latest version
Make sure you have TS 4.3.5 or older installed (either globally or in the workspace project)
Open any file with a .ts extension
Select the TypeScript version using the dropdown in the statusbar. You either want to select the Workspace version or your global version instead of VSCode's pre-installed version.
See image below for directions on last step:
I have the same exact problem, with my typescript project. With npm:
npm i #types/react#latest
then restart vscode
I have the same issue. Upgrading #types/react did not help. I had to remove it to fix the problem. Some how I still get type definition from somewhere. This just start happening on a project I have been working on for a year. Not sure if its coming from a VsCode update or upgrading react a couple weeks back.
The bug is happening on VsCode windows and mac.
This will be fixed with the new version (4.5) of TypeScript. See: https://github.com/microsoft/TypeScript/issues/45784
https://github.com/microsoft/TypeScript/pull/45792
Until this is released, you can use the next version.
npm i typescript#next
Don't forget to regenerate the lock file to make sure the right version is installed.
This error appears when I started using react redux, I tried every solution I found online but nothing
Changing react and react redux version I installed schedule,
react 16.5 with redux 6.0.0 = nothing
react 16.8.6 with redux 6.0.0 or 6.0.1 or 7.0.2 = nothing
"dependencies": {
"expo": "^32.0.6",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-redux": "^6.0.0",
"react-saga": "^0.3.1",
"react-thunk": "^1.0.0",
"redux": "^4.0.1",
"redux-saga": "^1.0.2"
},
"devDependencies": {
"schedule": "^0.4.0"
},
FOUND SOLUTION
This is because you may of had a previous version of react-redux installed in node_modules in that folder name. instead of expo start or npm start. try expo r -c
This removes the cache in expo for that directory. Such a pain to find this answer.
Don't know why and who, but I think it's something with npm, So I've just created a new project with the same dependencies versions, and It worked !!
I moved all my file a created in last project to the new one, and it still working.
So If you tried every single solution out there just move to yarn, or create a new project with the same dependencies compatible versions, check redux documentation or use this one :
"dependencies": {
"expo": "^32.0.6",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-redux": "^6.0.0",
"react-saga": "^0.3.1",
"react-thunk": "^1.0.0",
"redux": "^4.0.1",
"redux-saga": "^1.0.2"
},
"devDependencies": {
"schedule": "^0.4.0"
},