I am trying to import a box component from @mui/material/Box. I have installed npm i @mui/material. But it's occurring this error, " 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 anyone help me? How to fix this?

CodePudding user response：

Could be that the dependency @emotion/react is out of package.json somehow. So try to run npm install @emotion/react --save.

CodePudding user response：

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.