質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.31%
Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

意見交換

クローズ

1回答

1687閲覧

ReactでのMUI Xについて

raguel

総合スコア25

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2023/06/25 08:25

0

0

MUI Xについて質問です。

Win11+VScodeという環境で、React+typescript+MUI にて作成を行っております。

公式サイトに掲載されている以下の方法で、MUI Xをインストール。
npm install @mui/x-data-grid
npm install @mui/x-date-pickers

tsx

1import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; 2import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; 3import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; 4import { DatePicker } from '@mui/x-date-pickers/DatePicker'; 5 6export default function BasicDatePicker() { 7 return ( 8 <LocalizationProvider dateAdapter={AdapterDayjs}> 9 <DemoContainer components={['DatePicker']}> 10 <DatePicker label="Basic date picker" /> 11 </DemoContainer> 12 </LocalizationProvider> 13 ); 14}

で、上記のソースを公式サイトからコピペ、動作確認をしましたところ、ブラウザ上で以下のエラーが発生します。
VScodeでは、エラーは表示されていませんが、画面には何も表示されません。

Failed to compile
./node_modules/@mui/utils/useControlled.js
Error: ENOENT: no such file or directory, open '~\node_modules@mui\utils\useControlled.js'

/プロジェクト名/node_modules/@mui/utils/ に、useControlled.js は存在しませんので、エラーが出る理解は出来るのですが、
何故、/プロジェクト名/node_modules/@mui/utils/ に、useControlled.js が存在しないのかが分かりません

関係ないかもしれませんが、/プロジェクト名/node_modules/@mui/material/utils/ には、useControlled.js が存在します。

MUIやMUI Xを再インストールを行っても、
node_modules@mui\utils\useControlled.js は作成されません。
node_modules@mui\utils\useControlled.js が作成されるには、何をすればよいのでしょうか?

尚、package.json に記載されているmui関連のバージョンは、以下の通りです。

"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.11.16",
"@mui/material": "^5.13.6",
"@mui/styled-engine-sc": "^5.12.0",
"@mui/utils": "^5.13.6",
"@mui/x-data-grid": "^6.9.0",
"@mui/x-date-pickers": "^6.9.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",

"typescript": "^5.1.3"

以上

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

回答1

#1

raguel

総合スコア25

投稿2023/06/25 13:21

理解し難いのですが、自己解決しました。

VSCodeを再起動し、npm start でブラウザを立ち上げると、エラーは発生しませんでした。

@mui\utils以下にあったファイル数、65個だったはずなのですが、エラー解除後にみると78個増えてました。
VSCodeを再起動&npm startを実行する際、依存関係をチェックをし、不足していた場合は勝手に対策をするのでしょうか????

脳内のもやもやは消えてませんが、解決したのは良かったので、解決済みとさせて頂きました。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

最新の回答から1ヶ月経過したため この意見交換はクローズされました

意見をやりとりしたい話題がある場合は質問してみましょう!

質問する

関連した質問