I am trying to import a box component from @mui/material/Box. I have installed MUI 5 using the following command npm i @mui/material.
But this error is occurring, Module not found: Can't resolve '@emotion/react' in 'E:\frontend\node_modules\@mui\styled-engine'
Here is my code.
import * as React from 'react';
import Box from '@mui/material/Box';
export default function WhiteSpace() {
return (
<div style={{ width: 200 }}>
<Box
component="div"
sx={{
whiteSpace: 'nowrap',
my: 2,
bgcolor: 'background.paper',
}}
>
White Space Nowrap. White Space Nowrap.
</Box>
<Box
component="div"
sx={{
whiteSpace: 'normal',
my: 2,
bgcolor: 'background.paper',
}}
>
White Space Normal. White Space Normal.
</Box>
</div>
);
}
Can someone help me fix this?
@emotion/react and @emotion/styled are peer dependencies of many mui packages, ie @mui/material. This gives us more freedom over which emotion version we would like to use, but does mean we must install the dependencies ourselves.
npm i @emotion/react @emotion/styled
One of my friend faced the same issue couple of days ago, the solution is as follows:
Step 1: npm i @emotion/react Step 2: It will give same error with different dependency name, install it with npm and your app will run.
Could be that the dependency @emotion/react is out of package.json somehow.
So try to run npm install @emotion/react --save.