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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

Q&A

1回答

3470閲覧

【React】material-uiモジュールをインストールしてもエラーが出てしまいます。

-takuma

総合スコア40

Material-UI

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

0グッド

0クリップ

投稿2022/03/05 09:51

編集2022/03/05 09:59

前提

Reactプロジェクトにてnpm startをしたところ
chromeのディベロッパーツールにて「Uncaught Error: Cannot find module '@material-ui/icons/Menu'」
というエラーログが出てしまい、画面が表示されなくなってしまいました。
イメージ説明

実現したいこと

このエラーを治して画面を表示できる等にしたいです

試したこと

以下のコマンドを打ちましたが結果は変わりませんでした。
npm install @material-ui/core
npm install @material-ui/icons

SignUp.jsxのコード

React

1 2import Cookies from "js-cookie"; 3import { useContext, useState } from "react"; 4import { Link } from "react-router-dom"; 5import { signUp } from "../api/auth"; 6import { AuthContext } from "../App"; 7import * as Icons from '@material-ui/icons/Menu' 8 9export const SignUp = () => { 10 const { setIsSignedIn, setCurrentUser } = useContext(AuthContext); 11 12 const [email, setEmail] = useState(""); 13 const [password, setPassword] = useState(""); 14 const [passwordConfirmation, setPasswordConfirmation] = useState(""); 15 const confirmSuccessUrl = "http://localhost:3000"; 16 17 const generateParams = () => { 18 const signUpParams = { 19 email: email, 20 password: password, 21 passwordConfirmation: passwordConfirmation, 22 confirmSuccessUrl: confirmSuccessUrl, 23 }; 24 return signUpParams; 25 }; 26 27 const handleSignUpSubmit = async (e) => { 28 e.preventDefault(); 29 const params = generateParams(); 30 try { 31 const res = await signUp(params); 32 console.log(res); 33 if (res.status === 200) { 34 Cookies.set("_access_token", res.headers["access-token"]); 35 Cookies.set("_client", res.headers["client"]); 36 Cookies.set("_uid", res.headers["uid"]); 37 38 setIsSignedIn(true); 39 setCurrentUser(res.data.data); 40 41 alert("confirm email"); 42 console.log("signed in successfully"); 43 } 44 } catch (e) { 45 console.log(e); 46 } 47 }; 48 return ( 49 <> 50 <h1>サインアップページです</h1> 51 <form> 52 <div> 53 <label htmlFor="email">メールアドレス</label> 54 <input 55 type="email" 56 id="email" 57 name="email" 58 value={email} 59 onChange={(e) => setEmail(e.target.value)} 60 /> 61 </div> 62 <div> 63 <label htmlFor="password">パスワード</label> 64 <input 65 type="password" 66 id="password" 67 name="password" 68 value={password} 69 onChange={(e) => setPassword(e.target.value)} 70 /> 71 </div> 72 <div> 73 <label htmlFor="password_confirmation">パスワード確認</label> 74 <input 75 type="password" 76 id="password_confirmation" 77 name="password_confirmation" 78 value={passwordConfirmation} 79 onChange={(e) => setPasswordConfirmation(e.target.value)} 80 /> 81 </div> 82 <div> 83 <input 84 type="hidden" 85 id="confirm_success_url" 86 name="confirm_success_url" 87 value={confirmSuccessUrl} 88 /> 89 </div> 90 <button type="submit" onClick={(e) => handleSignUpSubmit(e)}> 91 Submit 92 </button> 93 </form> 94 <Link to="/signin">サインインへ</Link> 95 </> 96 ); 97};

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

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

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

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

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

guest

回答1

0

node_modulesとpackage.lock.jsonを消して、npm installを再度実行すると直るかもしれません👀
(この手のエラーはこれで治りがちです...)

また、今回のエラーと直接関係があるかはわかりませんが、import文の書き方が違うように感じました!

js

1import MenuIcon from ‘@material-ui/icons/Menu’;

投稿2022/03/12 04:05

yuta_22

総合スコア181

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問