material-table導入時にエラーとなりハマった話

こんにちは、CX事業本部の若槻です。

前回投稿した以下の記事でmaterial-tableを導入した際に、エラーとなりハマった箇所があったため、今回はそのことについて共有させて頂きます。

• React + Material-UIの画面にmaterial-tableを導入してみた | Developers.IO

ハマった内容

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は初心者ということもありとてもハマりました。

参考

• 【npm/yarn】パッケージをダウングレードする

以上