Can't resolve '#material-ui/lab/AdapterDateFns'
Can't resolve '#material-ui/lab/DateTimePicker'
Can't resolve '#material-ui/lab/LocalizationProvider'
I am getting these errors even after having installed #material-ui/lab
This works for me very well
npm install #mui/lab
In Material UI v5 you need to install #mui/lab.My dependencies are here :
"dependencies": {
"#mui/lab": "^5.0.0-alpha.54",
"#mui/material": "^5.2.1",
}
For more information check this link
I have a working codesandbox here: https://codesandbox.io/s/youthful-wave-8xjy4
Make sure both #material-ui/core and #material-ui/lab are at version "5.0.0-alpha.24" or above as I ran into the same import errors as you when following the guide at: https://next.material-ui.com/guides/pickers-migration/
// package.json
{
"dependencies": {
"#emotion/react": "11.1.5",
"#emotion/styled": "11.1.5",
"#material-ui/core": "5.0.0-alpha.24",
"#material-ui/lab": "5.0.0-alpha.24",
"date-fns": "2.17.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-scripts": "4.0.0"
},
}
Try running npm install #material-ui/core#next and npm install #material-ui/lab#next
This should move you to version 5.
If the need arises, delete the node_modules folder and run npm install.
Now if you look into the lab folder in node_modules/#material-ui, you will see the
Make sure that you installed a date management library. I think that #material-ui/lab/AdapterDateFns will be supported with the date-fns library.
date-fns installation
I read it at mui documentation for React Date Picker.
THIS WORKED FOR ME!!!!
I went into the node_modules to look for the specific files:
The location of the imports was not accurate so I changed them
accordingly
Then all these components are exported as a default so I removed
the curly braces and it worked for me.
I have installed these :
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#mui/lab": "^5.0.0-alpha.108",
"#mui/material": "^5.10.14",
Related
I think that when I upgraded to React 18, React broke a part of my app. I wanted to verify this behavior by simply using my previous package.json file which I saved as package-previous.json.
I'm assuming webpack allows one to simply change the package.json file to restore a previous app configuration, but I wanted to make sure there are no caveats.
I'm going back from:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^7.2.6"
},
to:
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6"
},
There's no problem with updating the dependency versions in your package.json; if the dependencies you changed are already installed, you can run npm update to upgrade or downgrade their versions, otherwise, you should run npm install.
This will update your node_modules and your package-lock.json files.
I recently upgraded React and several other packages to their latest versions, and every since, have been seeing warning messages in my Chrome console referring to bundled files instead of mapped files.
Example: at SelectInput (http://localhost:3000/static/js/bundle.js:119921:25) instead of at SelectInput (Select.tsx:123)
I'm using the latest versions of chrome and React Devtools.
Here are my dependency versions in package.json:
dependencies {
"#babel/runtime": "^7.18.3",
"#emotion/react": "^11.9.0",
"#emotion/styled": "^11.8.1",
"#types/node": "^15.12.2",
"#types/react": "^18.0.12",
"#types/react-dom": "^18.0.5",
"react": "^18.1.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^5.0.1",
"typescript": "^4.7.3"
}
I see this older solution Console logging error on bundle.js instead of React component but cannot find webpack.config.js to make updates, nor am I sure if it applies to these newer package updates.
How can I see the mapped file names in the chrome console?
I have found that webpack is default installed in create-react-app.
And I found that installing rewire allows at least to modify the webpack configuration.
That is not yet the full solution, but at least one step.
I´m facing a problem with DateRangePicker component from Mui. The thing is I have these dependencies:
"#date-io/date-fns": "^2.13.1",
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"#mui/lab": "^5.0.0-alpha.68",
"#mui/material": "^5.4.1",
"#mui/styled-engine-sc": "^5.4.1"
At the begining it worked but I removed the package-lock and the dependencies were updated to the last version. So, right now my RangeDatePicker desn't render the inputs and the whole component.
I can set "#mui/lab": "5.0.0-alpha.68" and it works but the idea is to use the last version and be able to upgrade to react 18.0.0
Any idea?
Thanks
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.
When i try to update one package in my project (Redux-form from 3 to 6), yarn updating react library too. Why? How i can debug this part?
I was trying:
Delete old version of redux form and add new version with this command
Yarn install redux-form
redux-form 6 has three peerDependency
"peerDependencies": {
"react": "^15.0.0",
"react-redux": "^4.3.0",
"redux": "^3.0.0"
}
So in order to work, it need these three. If you don't have one, probably yarn is forcing you to upgrade.