Reactで「Can’t import the named export ‘***’ from non EcmaScript module 」エラーがでる時の対応

create-react-appを使ってアプリケーションを作成しているとき、一部の外部ライブラリをimportすると下記のようなエラーが発生しライブラリの読み込みに失敗することがありました。

概要

調べてみたところ、create-react-appがwebpack ver.4を使っているため、外部ライブラリに含まれる.mjsファイルをデフォルトでロードしようとして発生しているエラーのようです。
自分の環境では、turf.js をimportしようとすると、index.mjsも同時に読み込んでしまいエラーが発生しました。
厄介なことに、turf.jsに依存している nebula.glreact-map-gl-draw ライブラリでも同様のエラーが発生します。

回避策

根本的な解決には至りませんが、react-app-rewiredを利用して、create-react-appのwebpack.configを上書きすること対応できました。

  • react-app-rewiredをインストール

  • packge.jsonのnpm scriptをreact-app-rewiredを使用するように書き換え

  • config-overrides.jsファイルを作成し、webpackConfig.module.rulesをオーバーライドする

以上です。

参考
Can’t import the named export ‘Component’ from non EcmaScript module · Issue #399 · reactioncommerce/reaction-component-library