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
Related
``` "dependencies": {
"#emotion/react": "^11.10.4",
"#emotion/styled": "^11.10.4",
"#material-ui/core": "^5.0.0-beta.5",
"#material-ui/lab": "^5.0.0-alpha.44",
"#mui/icons-material": "^5.10.6",
"#mui/material": "^5.10.8",
"#mui/material-next": "^6.0.0-alpha.57",
"#mui/x-data-grid": "^5.17.5",
"#reduxjs/toolkit": "^1.8.5",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"joi": "^17.6.2",
"joi-browser": "^13.4.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.4",
"react-router-dom": "^6.4.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},```
I believe I found a hacky way of being able to use the loading button mui component from material-ui/lab. Is there a better way to download the necessary dependencies than what I have here? Will this run into any serious bugs down the road when I employ the loading button component? I used --legacy-peer-deps for #material-ui/lab#next. Will this break anything?
Since version 5, You should use npm install #mui/... instead of npm install #material-ui/... that is for versions up to 4.
This way the problem with --legacy-peer-deps will be resolved.
So for the LoadingButton case, easily run npm install #mui/lab, and in Your code import it like
import { LoadingButton } from '#mui/lab';
Everything you need from material ui is provided with this npm install:
npm install #mui/material #emotion/react #emotion/styled
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 trying to install node_modules for my project, but instead of loading the libraries in package.json, npm install the latest ones. Before I used the command npm to install -g npm#latest, did it have any effect?
I tried npm install --force, npm install --legacy-peer-deps, and remove node but it has same error
My package.
{
"name": "",
"version": "0.1.0",
"private": true,
"homepage": ".",
"dependencies": {
"#ant-design/icons": "^4.0.0",
"#ant-design/pro-descriptions": "^1.2.0",
"#ant-design/pro-form": "^1.15.1",
"#ant-design/pro-layout": "^6.9.4",
"#ant-design/pro-table": "^2.17.3",
"#ant-design/pro-utils": "^1.8.0",
"#react-hook/resize-observer": "^1.2.0",
"#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/lodash": "^4.14.168",
"#types/node": "^12.0.0",
"#types/react": "^16.9.53",
"#types/react-dom": "^16.9.8",
"#types/react-router-dom": "^5.1.7",
"antd": "^4.11.1",
"antd-img-crop": "^3.14.1",
"axios": "^0.21.1",
"cookies": "^0.8.0",
"env-cmd": "^10.1.0",
"exceljs": "^4.2.0",
"file-saver": "^2.0.5",
"immer": "^8.0.1",
"js-cookie": "^2.2.1",
"less": "^4.1.0",
"less-loader": "^7.3.0",
"loadable": "^1.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-intl": "^5.10.18",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"read-excel-file": "^5.0.0",
"redux-injectors": "^1.3.0",
"redux-saga": "^1.1.3",
"typed-redux-saga": "1.2.0",
"typescript": "^4.0.3",
"web-vitals": "^0.2.4",
"xlsx": "^0.16.9"
}
Error Screenshot
Thanks so much
The caret ^ means it can install the most recent compatible version. If you want it to install a specific version, you can remove the ^ in front of the versions.
See package.json docs
and semver
The caret will let it install a later version that doesn't change the first number. For instance your package.json specifies ^4.0.0 for #ant-design/icons, but it installed 4.6.2. Since the 4 didn't change, that is acceptable.
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.
I'm using React Material UI and I get this error : Module not found: Can't resolve '#date-io/date-fns'.
Here are the dependencies that I have in my package.json file :
"dependencies": {
"#date-io/date-fns": "^2.0.0",
"#material-ui/core": "^4.9.5",
"#material-ui/pickers": "^3.2.10",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"date-fns": "^2.0.0",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-facebook-login": "^4.1.1",
"react-google-login": "^5.1.14",
"react-google-maps": "^9.4.5",
"react-hook-form": "^5.2.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0"
},
I tried installing the last version of date-io/date-fns, then tried the version 2.0.0 and version 1.0.0 and I still get the same error.
$ npm i date-fns#next #date-io/date-fns#1.x
reference:
https://github.com/mui-org/material-ui-pickers/issues/240
https://github.com/dmtrKovalenko/date-io/issues/33
Reference: https://material-ui-pickers.dev/getting-started/installation#peer-library
Important: For material-ui-pickers v3 use v1.x version of #date-io
adapters.
npm i #date-io/date-fns#1.x date-fns
// or
npm i #date-io/moment#1.x moment
// or
npm i -s #date-io/luxon#1.x luxon
// or
npm i -s #date-io/dayjs#1.x dayjs
You can check this Commands...
yarn add date-fns
or
npm i date-fns
In my code, I have used "import DateFnsUtils from "#date-io/date-fns/build/date-fns-utils", which caused "Module not found: Error: Can't resolve '#date-io/date-fns/build/date-fns-utils' ..." exception.
I have fixed this by importing from #date-io/date-fns'.
import DateFnsUtils from '#date-io/date-fns';