paulhoughton/react-pwa: Material Design Progressive Web App React starter kit を使って、pwa アプリケーションの雛形を作成しようとしていて、
tleunen/react-mdl: React Components for Material Design Lite で、以下のエラーが発生しました。
対応方法を記載します。
エラー内容
MDLComponent.js:38 Uncaught TypeError: Cannot read property 'upgradeElements' of undefined
at MDLComponent.componentDidMount (MDLComponent.js:38)
at commitLifeCycles (react-dom.development.js:8770)
at commitAllLifeCycles (react-dom.development.js:9946)
at HTMLUnknownElement.callCallback (react-dom.development.js:542)
at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
at invokeGuardedCallback (react-dom.development.js:438)
at commitRoot (react-dom.development.js:10050)
at performWorkOnRoot (react-dom.development.js:11017)
at performWork (react-dom.development.js:10967)
at requestWork (react-dom.development.js:10878)
原因
import ReactMDL from ‘react-mdl’; not working · Issue #320 · tleunen/react-mdl を見る限り、material.js
と、material.css
の import 文の記載がない場合に発生することがわかりました。
現在作成中のサンプルは、paulhoughton/react-pwa: Material Design Progressive Web App React starter kit を コピーしており、material.js
と、material.css
のimport文は、vendor.js
に実装されています。
- react-pwa/src/vendor.js
import 'react-mdl/extra/material'; import 'react-mdl/extra/material.css';
import 文の記載はあるのにエラーとなっており、原因がわからずで、一通りファイルの差分を確認したところ、webpack.config.js
にエントリポイントとして、vendor.js の記載がないことに気がつきました。
-
修正前
/* エントリーポイント */ entry: ['./assets/js/index'],
-
修正後
/* エントリーポイント */ entry: ['./assets/js/index','./assets/js/vendor'],
記載方法が推奨されるのかはわかりませんが、エントリーポイントに vendor.js を記載したところ、build しなおしたところ、エラーは発生しなくなりました。
index.js と、index.js が import しているモジュールから import する記述がなければ import されません。
index.js に import 'react-mdl/extra/material
と、import 'react-mdl/extra/material.css
を記載しても良かったですが、参考にした実装にならって vendor.js を使って、エントリーポイントを追加しました。
補足
README.md
には、廃止予定の旨が記載されています..
material-components/material-components-web: Modular and customizable Material Design UI components for the web を使用するのが推奨されるということです。
進化が早すぎて追いきれてない感覚がありますが、一旦は、 React-MDL
を使用する形で実装を続けようと思います。
後日、jamesmfriedman/rmwc: A React wrapper for Material Design (Web) Components を使うようにプログラムを修正しました。
以上です。
コメント