I'm trying to use the Material UI Persistent drawer React component that you can find here https://mui.com/material-ui/react-drawer/
I attempted to copy paste the source code into a component and use that in my React project, but I'm getting errors as follows:
ERROR in ./src/components/Drawer.js 6:0-36
Module not found: Error: Can't resolve 'classnames' in '/Users/jmh/Desktop/ITC Classwork/fs_pet_adoption_fe-haimy88/src/components'
Module not found: Error: Can't resolve '#material-ui/core/styles' in '/Users/jmh/Desktop/ITC Classwork/fs_pet_adoption_fe-haimy88/src/components'
Module not found: Error: Can't resolve '#material-ui/core/Drawer' in '/Users/jmh/Desktop/ITC Classwork/fs_pet_adoption_fe-haimy88/src/components'
I don't know why this is happening, since I think I have all the dependencies in my package.JSON, as seen below:
"dependencies": {
"#emotion/react": "^11.9.0",
"#emotion/styled": "^11.8.1",
"#material/drawer": "^13.0.0",
"#mui/icons-material": "^5.6.0",
"#mui/material": "^5.6.0",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
Please let me know if anyone has any insight as to this issue. Thank you!
Related
I am trying to test a react typescript project using jest but it's giving a confusing error:
Error image
Here is my package.json:
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^12.1.5",
"#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",
"jest": "^27.5.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.2",
"react-scripts": "5.0.0",
"ts-jest": "^27.1.4",
"typescript": "^4.6.3",
"web-vitals": "^2.1.4",
},
"devDependencies": {
"#types/react-test-renderer": "^18.0.0",
"react-test-renderer": "^18.1.0"
}
I wrote this basic test which gives the error:
import renderer from 'react-test-renderer'
import AddShipmentButton from './AddShipmentButton'
it('works', () => {
const tree = renderer.create(<AddShipmentButton />).toJSON()
expect(tree).toMatchSnapshot()
})
I had to install the dependencies using --legacy-peer-deps. What could be the issue? Thanks in advance.
The problem was that I installed the latest version of react-test-renderer v18.0.1 when the React version is v17.0.2. Installing react-test-renderer version 17.0.2 solved this issue.
Upgrade your app dependencies like this
"react": "~18.0.0",
"react-dom": "^18.0.0",
"react-test-renderer": "^18.0.0"
import is wrong as defined on React docs, try with this way
import TestRenderer from 'react-test-renderer';
import AddShipmentButton from './AddShipmentButton'
it('works', () => {
const tree = TestRenderer.create(<AddShipmentButton />).toJSON()
expect(tree).toMatchSnapshot()
})
Read usage of TestRenderer here
Make sure you are using the same version of react and react-test-renderer
You can change the version of node package using npm install [package-name]#[version-number]
I'm trying to run a react app but following errors come.
ERROR in ./node_modules/#mui/styled-engine/GlobalStyles/GlobalStyles.js 3:0-40
ERROR in ./node_modules/#mui/styled-engine/StyledEngineProvider/StyledEngineProvider.js 3:0-47
ERROR in ./node_modules/#mui/styled-engine/index.js 6:0-39
ERROR in ./node_modules/#mui/styled-engine/index.js 30:0-62
ERROR in ./node_modules/#mui/system/esm/ThemeProvider/ThemeProvider.js 11:27-60
ERROR in ./node_modules/#mui/system/esm/index.js 1:0-88
I already tried,
npm i #mui/styled-engine
npm i #mui/system
These are the dependencies in package.json file
"#mui/icons-material": "^5.5.1",
"#mui/material": "^5.5.2",
"#mui/styled-engine": "^5.5.2",
"#mui/system": "^5.5.2",
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-scripts": "5.0.0",
"styled-components": "^5.3.3",
"web-vitals": "^2.1.4"
You need to install these two:
#emotion/react
#emotion/styled
npm i #emotion/react #emotion/styled
I'm trying to use some components from #react-three/drei and it gives me a ton of import errors. No matter what I try to use from #react-three/drei, I get these errors.
Example:
ERROR in ./node_modules/three-stdlib/loaders/EXRLoader.js 1703:52-62
export 'RGBEFormat' (imported as 'RGBEFormat') was not found in 'three'
Another example:
export 'RGBEEncoding' (imported as 'RGBEEncoding') was not found in 'three'
These are the project's dependencies:
"#react-three/drei": "^8.3.1",
"#react-three/fiber": "^7.0.24",
"#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",
"three": "^0.136.0",
"three-stdlib": "^2.6.2",
"web-vitals": "^2.1.2"
I appreciate the help and thanks in advance!
The Three.js migration guide says "RGBEEncoding and RGBEFormat have been removed". from 136.
Try using 135 instead.
I updated my app to React v18, and there's an error when installing styled-components and redux-toolkit. React v18 doesn't support these libraries? Or did I install something wrong?
here is my dependencies
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.0.0",
"#testing-library/user-event": "^13.2.1",
"#types/jest": "^27.0.1",
"#types/node": "^16.7.13",
"#types/react": "^17.0.20",
"#types/react-dom": "^17.0.9",
"react": "^18.0.0-rc.0",
"react-dom": "^18.0.0-rc.0",
"react-redux": "^8.0.0-beta.1",
"react-scripts": "5.0.0",
"typescript": "^4.4.2",
"web-vitals": "^2.1.0"
},
add to the command --force or --legacy-peer-deps
I had the same problem and I edited my package.json file dependencies
from
"next": "12.1.2",
"react": "18.0.0",
"react-dom": "18.0.0"
to
"next": "10.2.0",
"react": "17.0.2",
"react-dom": "17.0.2"
then run npm i
It's working, for now, until redux-toolkit supports react18
My problem is the same when i install new project using react 18
I am getting the following error-
Failed to compile
./node_modules/primereact/components/dropdown/DropdownPanel.js
Module not found: Can't resolve 'react-transition-group' in 'D:\my-app\node_modules\primereact\components\dropdown'
This is my package.json
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/react-transition-group": "^4.4.1",
"primeflex": "^2.0.0",
"primeicons": "^4.1.0",
"primereact": "^6.1.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
In App.js
import React, { useState } from 'react';
import { Dropdown } from 'primereact/dropdown'; //getting error after adding this line
import 'primeflex/primeflex.css';
What am I missing here?
Could it be that you only included the types, "#types/react-transition-group": "^4.4.1",, but did not install the actual package?
Try installing the package with npm install react-transition-group. The #types/* repo only contains types, not code.