Reactをv16にアップグレードしたらuglifyjsの秘孔をついてハマった件

webpackのproduction buildの話です。

Reactが悪いわけではないんですが、たまたま秘孔をつくコードがReactないし関連するReact v16に依存するライブラリにあったんでしょうね。

• Reactをv16にアップグレードしたら webpack で production build ができなくなった
• pluginを着脱しながら調べた結果、 uglifyjs がクラッシュしていることがわかった
• uglifyjs は現在 オリジナル + 2つのforkがあり、すべてで再現する
  • original: https://github.com/mishoo/UglifyJS
  • fork 1: https://github.com/mishoo/UglifyJS2 (a.k.a. uglify-es)
  • fork 2: https://github.com/terser-js/terser (uglifyjs2 の fork)
• ugfilyjs-webpack-plugin は v0.x で uglifyjs に依存し、 v1.0 は uglify-es に依存を変えていたが、2018年9月にリリースされた v2.0 から uglifyjs に戻している
  • それによれば、 uglify-es はメンテされていないとのこと
  • Release v2.0.0 · webpack-contrib/uglifyjs-webpack-plugin · GitHub
• uglifyjsの系譜でメンテされているものは、現状では terser のみということに
  • terserではいまこの問題の最小限のコードが特定された、という状況なので、修正の期待がもてる
  • TypeError: Cannot read property '_walk' of null · Issue #120 · terser-js/terser · GitHub
  • このissueによれば collapse_vars: false にすることで問題は回避できるそうで、試してみるとそのとおりだった

というわけで webpack.config.js の optimization の設定はこんな感じにしました。

if (production)
  config.optimization = {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          sourceMap: true,
          parallel: true,
          compress: {
            collapse_vars: false, // workaround for a minifier's bug: https://github.com/terser-js/terser/issues/120
            drop_console: true,
          },
        },
      }),
    ],
    noEmitOnErrors: true,
  };
  // ...
}