I have imported two material icons packages
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2"
but the code is not working it shows me errors like a module not found so what do I need to do?
npm install #material-ui/icons
npm install #material-ui/core
i have installed abowe two packeges.
[below is the error of my project]
Material UI with v5 did a rebranding to move away from just "material" and is now called "MUI".
This means, their npm packages have too been renamed.
If you goto #material-ui/core in npm you can see this notice
This package has been deprecated
You can now upgrade to #mui/material. See the guide: https://mui.com/guides/migration-v4/
In this case, assume you are importing icons as suggested in https://mui.com/components/material-icons which uses v5 where as installed packages are v4 (with #material scope)
You have couple of options:
upgrade all packages to v5 (ie, #mui scope) if you want to use mui v5. Do note, you have to install couple of additional dependencies as well - #emotion/react #emotion/styled as MUI is now based on emotion.
or, update import to #material-ui/icons as mentioned here - https://v4.mui.com/components/material-icons/
I guess the new way to install material UI is npm install #mui/icons-material. try it out.
Related
Can anyone help me out to solve this problem.
As I am learning React Native, I was going through styled components but was facing an error related to styled components not compatible with react18 version. and same works in react#16 and below
I was trying to install styled-components for styling components in react-native. And i was receiving error saying that react18 is not compatible. I just want styled components to work
Try to install it with this command
npm install styled-components --force
I sorted the solution as styled-component was not working for react 18.0.2.
So I decided to uninstall react 18.0.2 by using npm uninstall react#18.0.2
and then
I reinstalled npm install react#17.0.2 and then I read the documentation of Styled Component
and installed styled-components using yarn add styled-components and successfully sorted out my problem.
npx expo install react-dom
This fixed it for me (using expo managed react-native app)
https://github.com/styled-components/styled-components/issues/3788#issuecomment-1335191911
I had same problem when taking Udemy course about React Native. This course provides git with complete code, so what I did was:
Downloaded packages.json file from git url provided with course (last version),
Deleted my project node_modules folder,
Deleted my project packages-lock.json file,
Executed npm install
enter image description here
I was working on the "#material-ui/core": "^4.12.3" version, and now the version is changed. I am looking the way for :
import { GridOverlay, DataGrid } from '#mui/x-data-grid';
But it is not working.
can anyone help me in setting up both the version and documentation for the older version so that I go with both version in my application.
TL;DR
Step 1.
// with npm
npm install #mui/material #emotion/react #emotion/styled
// with yarn
yarn add #mui/material #emotion/react #emotion/styled
Step 2.
// with npm
npm install #mui/x-data-grid
// with yarn
yarn add #mui/x-data-grid
Step 3.
import { DataGrid } from '#mui/x-data-grid'
Long Text
Our company also encountered the same problem when migrating, and finally solved it perfectly.
The reason for the above error is because #mui/x-data-grid is dependent on MUI v5, so you have to install it, or you can be used with MUI v4 with some additional steps.
This is a reference guide for upgrading your site from MUI X v4 to v5. MUI X v5 is fully compatible with MUI Core (includes Material UI) v5 and can be used with MUI Core v4 with some additional steps. Most breaking changes are renaming of CSS classes or variables to improve the consistency of the grid.
Refer to MUI doc
You may be wondering, but what should I do if I use mui v4 now?
According to our actual experience and the information provided by the official Material, it is no problem to have the v4 package and the v5 package at the same time, so you can install the MUI v5 first and let #mui/ x-data-grid can be used, waiting for the spare time to migrate the v4 components to the v5 usage.
We strongly recommend you migrate MUI Core to v5 when using MUI X v5. However, this might not be possible, depending on the complexity of the application. The alternative is to install MUI Core v5 and configure it to keep MUI Core v4 running alongside.
Refer to MUI doc
Module not found: Can't resolve '#mui/x-data-grid'
Means you don't have this module installed
If you find this error for any other modules meaning is the same you have to install that specific module
npm install #mui/x-data-grid
npm i #mui/x-data-grid install this one first
Even if you have installed the dependency #mui/x-data-grid VS Code may nag you with this error, the solution is to restart the VS Code.
After having installed my material-ui for my react project, but when it comes to use it always bring up an error telling me that
'Module not found'
./src/Components/LatestPost.jsModule not found: Can't resolve#material-ui/lab/Skeleton' in 'C:\Users\Zinox\super-surf\src\Components'
You would have only installed #material-ui/core package which would not include the experimental features you are looking for and hence you are getting the error Module not found: Can't resolve '#material-ui/lab/Skeleton'
To use experimental features of Material UI like Skeleton, Rating, Speed Dial and so on you need to also install the Material UI Lab package,
npm install #material-ui/lab
Note that this is needed in addition to the #material-ui/core package that you installed earlier with npm install #material-ui/core
After installing the above package you could import it as,
import Skeleton from '#material-ui/lab/Skeleton';
in your React Component and use it as desired.
you should add two packages into the app first is
yAR i #material-ui/lab #material-ui/core
Stumbled upon the same issue. Skeleton doesn't seem to be contained in the latest package version (4.0.0-alpha.22) at the moment. But it is on their source folder, which is odd.
Maybe you open an issue at their GitHub.
EDIT:
I did: https://github.com/mui-org/material-ui/issues/16919
Module not found: Can't resolve '#material-ui/lab/Skeleton'
If you want to use Skeleton, Rating, Speed Dial, and so on you need to also install the Material UI Lab package.
npm install #material-ui/lab
or
yarn add #material-ui/lab
Link here.
enter link description here
Just starting (again) with material UI and react. There are two packages material-ui and #material-ui, which is the best starting point (latest) as of 2019-07 timeframe?
I think it is npm install #material-ui/core based on ... https://material-ui.com/getting-started/installation/. The GIT repo is at https://github.com/mui-org/material-ui
Simple question, hopefully simple answer.
Other questions I looked at:
Use Create-React-App with Material UI - This answer says to use npm install --save material-ui but because it is 2 years old, I think it may be out of date.
Difference between Material-Ui and Material-Ui-Next
How to install Material-UI Docs WITHOUT installing material-ui?
#material-ui/core is the correct one to use for v4. For v5, the equivalent package is #mui/material.
If you go to https://www.npmjs.com/package/material-ui, you'll see that material-ui is deprecated. The last stable version in the material-ui package was 0.20.2. For the 1.0 release it moved to #material-ui/core and for the stable release of v5 it moved to #mui/material.
The #material-ui scope (for v4) is used for the following packages that are all managed within the monorepo you referenced (https://github.com/mui-org/material-ui/tree/v4.12.3/packages):
#material-ui/core
#material-ui/icons
#material-ui/styles
#material-ui/system
#material-ui/lab
#material-ui/utils
#material-ui/types
#material-ui/docs
#material-ui/codemod
Similarly, the #mui scope (for v5) is used for the similar set of packages supported for v5 (https://github.com/mui-org/material-ui/tree/master/packages):
#mui/material
This is the equivalent of #material-ui/core
#mui/core
This is the NOT the equivalent of #material-ui/core. #mui/core is a new package for unstyled (no Material-Design CSS applied) versions of the components.
#mui/icons-material
#mui/styles
This is for supporting the withStyles and makeStyles JSS-backed styling APIs and is not recommended for use in new projects.
#mui/system
#mui/lab
#mui/utils
#mui/types
#mui/docs
#mui/codemod
The # scope indicates package ownership
The main advantage of scopes I've seen so far is that each scope is controlled by npm account of an organization / user, much like GitHub usernames / organization names.
This way, it makes it easy to determine if the package you are looking at belongs to an organization you trust, or if it is a third party tool.
For example, if you see:
#material-ui
then you know that it comes from the material-ui team and can be trusted.
On the other hand, the same could not be said about:
material-ui
For more https://docs.npmjs.com/about-scopes
I want to use the Slider component from Material UI in my React app.
The Slider is part of 'Lab', a 'package that hosts the incubator components that are not yet ready to move to the core.'
npm install #material-ui/lab
npm install #material-ui/core
Do I still need to install Core Material UI to my project or can I only add the Lab?
I do not want to add more bulk to my already big project.
#material-ui/lab have dependency on #material-ui/core, so you must need to added #material-ui/core.it's your choice how you added npm install or cdn
here some useful for you i guess:
#material-ui/core cdn reference: Here
#material-ui/lab cdn reference: Here
or you can try ant.design
they have some awesome tools for you.
Thank You :)
#material-ui/lab has #material-ui/core as a peer dependency. So yes you do need to add it. However if you're concerned about bundle size then rest assured that importing a lab component will not add the complete core to the bundle. It will only add what's necessary.