はじめに
本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。
MUI（styled-components）でのFailed to compile解消法
エラーが発生した状況とエラー内容
MUIの公式ドキュメントを参照し、以下の通りインストールを実行しました。
ターミナル
$ npm install @mui/material @mui/styled-engine-sc styled-components
アプリケーションの作成を進め、npm startしたところ以下のようなエラーが出ました。
エラーメッセージは以下の通りです。
Failed to compile
./node_modules/@mui/styled-engine/index.js
Module not found: Can't resolve'@emotion/react' in '/Users/ユーザー名/アプリケーション名/node_modules/@mui/styled-engine
エラーを解消した方法
ターミナルで以下の通り実行することで解消することができました。
ターミナル
$ npm install @emotion/react @emotion/styled
styled-componentsを使用する場合には、以下を実行すれば良いはずですが、emotionもインストールしないと上記のエラーが出てしまうようです。
ターミナル
$ npm install @mui/material @mui/styled-engine-sc styled-components
参照