material-ui でのModule not found

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
Reactでchat機能を作成しています。
material-uiからコピーして貼り付けたところ以下のエラーが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ
Module not found: Can't resolve '@mui/material/Avatar' in '/Users/******/practice/chatbot-demo/src/components'

### 該当のソースコード

import React from 'react';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography';

const Chats = () => {
  return (
    <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
      <ListItem alignItems="flex-start">
        <ListItemAvatar>
          <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
        </ListItemAvatar>
        <ListItemText
          primary="Brunch this weekend?"
          secondary={
            <React.Fragment>
              <Typography
                sx={{ display: 'inline' }}
                component="span"
                variant="body2"
                color="text.primary"
              >
                Ali Connors
              </Typography>
              {" — I'll be in your neighborhood doing errands this…"}
            </React.Fragment>
          }
        />
      </ListItem>
    </List>
  )
}

export default Chats
```ここに言語を入力
コード

試したこと

調べて下記を実行しました。
npm install @material-ui/core
npm install @material-ui/icons

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

それ、ちょっと昔の入れ方かもわからん。そやから、ごめんな〜、せっかく入れたやつ、まず消すわ〜

yarn remove @material-ui/core @material-ui/icons

ほんで、これや。

yarn add @mui/material@next @mui/styled-engine-sc@next styled-components @emotion/react @emotion/styled

package.json の dependencies　に、こないな追加されると思うで。

+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
+    "@mui/material": "^5.0.0-rc.1",
+    "@mui/styled-engine-sc": "^5.0.0-rc.1",
+    "styled-components": "^5.3.1",

こんなん

表示されたんやけど、これでええかのう？

補足

おっと。npm 使うてはるんか。そしたら、

npm uninstall @material-ui/core 
npm uninstall @material-ui/icons

してからの

npm install @mui/material@next @mui/styled-engine-sc@next styled-components @emotion/react @emotion/styled

かのう。

Comments

[natsu1]

ありがとうございました！！できました！

[退会済みユーザー]

おめっとうさん！