React-MDL Uncaught TypeError: Cannot read property 'upgradeElements' of undefined が発生する


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 を使うようにプログラムを修正しました。

以上です。

コメント