create-react-appで作成したアプリでskyway-jsをimport時にビルドエラーが出る問題を回避する方法について

create-react-appで作ったwebappで skyway-js を import しようとすると、build が通らない事象が発生する場合があります。

再現手順は以下のようになります。

$ create-react-app hoge
$ cd hoge
$ yarn add skyway-js
// src/App.js などに `import Peer from 'skyway-js'` を挿入
$ yarn build

エラーログは以下のようになります。

$ yarn build
yarn build v0.27.5
warning ../../package.json: No license field
$ react-scripts build
Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file:

./node_modules/skyway-js/dist/skyway.js:13014

Read more here: http://bit.ly/2tRViJ9

error Command failed with exit code 1.

原因

このビルドエラーは、Webpackのバージョンによって標準minifyツールが異なることが原因で発生します。Webpack3.xではES5のminifyに対応しているuglify-jsが採用されているのに対し、Webpack4.xではES6以上のminifyに対応しているuglify-esが採用されています。

解決策

skyway-jsはES6+で記述されたプラグインですので、ビルドエラーを回避するにはWebpack4.xをお使いいただく必要があります。
そのため、お手持ちのcreate-react-appを現時点での最新版(v2.1.1)にアップデートいただくことで、Webpackも自動でアップデートされ、上記の問題は解決されます。