ビデオ通話機能を実装するためにskyway-js というライブラリをRails＋webpacker＋Reactのサービスにインストールしたときにエラーが出て軽くハマったのでメモ。

エラー内容

Rails＋webpacker＋Reactの環境でyarn add skyway-jsを実行。それをimportするところまではよかったが、公式ドキュメントに沿ってライブラリ内のPeerクラスをnewすると以下の画像のようにエラーになってハマった。

「default is not a constructor」とか言われてるけど実際node_modules以下にインストールされたコードを読むとちゃんとconstructor書いてあるぞ。。

TypeErrorなのでTypeScriptのconfigの問題かと思ったけどその方向で調べても分からず。

対応

原因特定するために手元で適当なReactアプリを作って同じようにyarn addすると問題なく動く →じゃRails特有（webpacker）の問題？と思い、rails/webpackerのgithub issueを漁る。で、以下のissueを見つける。

書いてある通りにbabel.config.jsにsourceType: 'unambiguous',を追記して解決した。

ライブラリがTypescriptで書かれていて、babelのコンパイルがうまくいっていなかったので、設定でチェックを緩くして解消できた。型チェックは緩くなってしまったけどこれしかしょうがなさそう。