CODEWITHSUNDEEP
javascriptreactjsnpmmaterial-ui
stmp_lee
stmp_lee

Reputation: 843

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

I am trying to import a box component from @mui/material/Box. I have installed Material-UI 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?

Upvotes: 45

Views: 69158

Answers (4)

Limon
Limon

Reputation: 49

use

npm i @emotion/react @emotion/styled

to install @emotion/react then it will solve your problem

Upvotes: 5

chantey
chantey

Reputation: 5827

@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

Upvotes: 72

Muhammad Farhan
Muhammad Farhan

Reputation: 117

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.

Upvotes: 2

Abror Abdullaev
Abror Abdullaev

Reputation: 279

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

Upvotes: 1

Related Questions