[解決済み] material-ui/core/styles/MuiThemeProvider をインポートできない。
質問
私はReactプロジェクトに取り組んでおり、Material UI Reactコンポーネントを使用しています。私は、インポートしたい
MuiThemeProvider
で
src/index.js
というように
import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";
.
しかし、私は
モジュールが見つかりませんでした。material-ui/core/styles/MuiThemeProvider' を解決できません。
チェックするのは
/node_modules/@material-ui/styles
はありません。
MuiThemeProvider
. それがわからないんです。プロジェクトを別のコンピュータに新たにインストールすると
/node_modules/@material-ui/styles
には
MuiThemeProvider
. を削除しました。
node_modules
フォルダで再インストールし
yarn install
しかし、それは何もしませんでした。
別のコンピュータにプロジェクトを新たにインストールすると、正常に動作します。
これらは
package.json
"dependencies": {
"@material-ui/core": "^4.5.0",
"@material-ui/icons": "^3.0.2",
"@turf/turf": "^5.1.6",
"axios": "^0.18.0",
"epsg-index": "^0.27.0",
"immutable": "^3.8.2",
"immutable-prop-types": "^0.0.3",
"lodash": "^4.17.11",
"mapbox-gl": "^1.2.0",
"moment": "^2.22.2",
"particles.js": "^2.0.0",
"phoenix": "^1.4.8",
"proj4": "^2.5.0",
"prop-types": "^15.7.2",
"rc-tooltip": "^3.7.3",
"react": "^16.4.2",
"react-dom": "^16.9.0",
"react-loader-spinner": "^2.3.0",
"react-redux": "^5.0.7",
"react-router-dom": "^5.0.0",
"react-slick": "^0.23.2",
"react-stripe-elements": "^4.0.0",
"react-test-renderer": "^16.8.1",
"redux": "^4.0.0",
"redux-actions": "^2.6.1",
"redux-auth-wrapper": "^2.1.0",
"redux-devtools-extension": "^2.13.5",
"redux-immutable": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"babel-preset-env": "^1.7.0",
"enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.9.1",
"enzyme-to-json": "^3.3.5",
"jsdom": "^13.2.0",
"jsdom-global": "^3.0.2",
"react-scripts": "2.1.8",
"redux-mock-store": "^1.5.3"
},
"resolutions": {
"**/**/fsevents": "^1.2.9"
},
なぜ2台のマシンでインストールが違うんだ!?
解決方法は?
それは
ではない
を明示的に引き込む必要があります。
@material-ui/styles
(Davinの回答にあるように)。実際、そのパッケージを明示的に
package.json
が問題になることがあります。
バンドルに複数回引き込まれるためです。
から https://material-ui.com/blog/september-2019-update/ :
v4.5.1 からは、ドキュメントで @material-ui/core/styles について可能な限り言及するようにしました。
この変更により、@material-ui/styles パッケージを直接インストールする必要がなくなりました。バンドルで@material-ui/stylesが重複することを防ぎ、混乱を回避することができます。
以下もご参照ください。 https://material-ui.com/styles/basics/#material-ui-core-styles-vs-material-ui-styles
インポートの問題は、あなたが持っていたことです。
import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";
の代わりに
import {MuiThemeProvider} from "@material-ui/core/styles";
前者は
MuiThemeProvider
の中にある別のファイルまたはディレクトリです。
@material-ui/core/styles
が、そうではありません。2つ目の構文は、名前付きエクスポートで
@material-ui/core/styles
というのは
それが何であるか
.
関連
-
[解決済み】webpack-dev-serverにリモート接続すると、「Invalid Host header」というメッセージが表示されます。
-
[解決済み】React.jsの配列の子要素のユニークキーを理解する
-
[解決済み】エラー:リクエストのエンティティが大きすぎる
-
[解決済み】PhantomJS 2.1.1を使用してReactJSアプリケーションをレンダリングできない理由とは?
-
[解決済み】このオブジェクトの "forEach "はなぜ関数でないのですか?
-
[解決済み】 \u003C とは何ですか?
-
[解決済み] ES6インポートで中括弧を使用するのはどのような場合ですか?
-
[解決済み] ReactのインラインスタイルでbackgroundImageを設定する
-
[解決済み] React - uncaught TypeError: 未定義のプロパティ 'setState' を読み取れない
-
[解決済み】Node.jsのrequireとES6のimport/exportを使い分ける。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】SecurityError: オリジンを持つフレームがクロスオリジンフレームにアクセスするのをブロックした
-
[解決済み】最大呼び出しスタックサイズ超過エラーとその修正方法とは?
-
[解決済み】コンソールがUnterminated JSX contentsエラーを投げる【終了しました
-
[解決済み] エラー。モジュールhtmlが見つからない
-
[解決済み】エラー:リスン EACCES 0.0.0.0:80 OSx Node.js
-
[解決済み】npm install --legacy-peer-deps は具体的に何をするのですか?どんなときに推奨されるのか/どんな使用例が考えられるのか?
-
[解決済み】Kendo Observable Bindingと併用する場合、Kendo Switch Labelsを変更することは可能ですか?[Kendo-UI]です。
-
[解決済み】PhantomJS 2.1.1を使用してReactJSアプリケーションをレンダリングできない理由とは?
-
[解決済み】TypeError:res.jsonは関数ではありません。
-
[解決済み】Syntax error: JavaScriptの不正なreturnステートメント