material-table導入時にエラーとなりハマった話
こんにちは、CX事業本部の若槻です。
前回投稿した以下の記事でmaterial-tableを導入した際に、エラーとなりハマった箇所があったため、今回はそのことについて共有させて頂きます。
ハマった内容
React + Material-UIの画面にmaterial-tableを導入するため、次のようにmaterial-tableのインストールを行いました。その際、特にバージョンは指定せずに最新版（1.68.0）をインストールしました。
% npm install --save material-table
すると、以下のように商品ページのコード内のMaterialTableコンポーネントの箇所でエラーが発生しました。
エラー内容は以下の通りです。
JSX element class does not support attributes because it does not have a 'props' property.
MaterialTable' cannot be used as a JSX component.
Its instance type 'MaterialTable<object>' is not a valid JSX element.
Type 'MaterialTable<object>' is missing the following properties from type 'ElementClass': render, context, setState, forceUpdate, and 3 more.
切り分け・解決
同じコードを別のReact + Material-UI + material-tableの環境に配置したところ、その環境ではエラーは再現しませんでした。
両環境の差分を調べたところ、エラーとなる方はインストールされているmaterial-tableのバージョンが1.68.0（最新版）であるのに対し、エラーとならない方は1.66.0でした。
そこでエラーとなった環境のmaterial-tableを1.66.0にダウングレードしました。
% npm remove material-table % npm install --save material-table@1.66.0
するとエラーは解消され、Reactアプリも正常に実行できるようになりました。
原因の推察
material-tableのGitHubでリリース情報を確認したところ、バージョン1.68.0はエラー遭遇時の4日前にリリースされていました。
直近で今回と同様のエラーのissueは上がっていませんでしたが、リリース直後ということもありバグを踏んだのかもしれません。今後FIXが出ないか注視したいと思います。
おわりに
material-table導入時にエラーとなりハマった話のご紹介でした。
エラーの文面で情報を探しても探し方が悪いのか全然見当たらず、また私がTypeScriptやReactは初心者ということもありとてもハマりました。
参考
以上
