Module not found: Can't resolve '@emotion/react' in 'E:\frontend\node_modules\@mui\styled-engine'

Question

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?

Answer 1

@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

Answer 2

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.