Railsと併用中のReact.jsを15系から16系にバージョンアップした際に詰まった事をまとめてみた

Railsのjavascriptの既存資産を流用するため react-rails を活用していた環境で併用しているReact.js(15系を利用中)に関して、17系がそろそろリリースされるため16系の最新バージョンに上げる事になった。

それに伴い、react-railsを Asset Pipeline方式からWebpack方式に変更した。
→ 理由： 従来から言われているように、Asset Pipeline方式だと、コードをapp/assetsやlib/assetsなどに置くか、誰かがgem化してくれるまで待つ事になる。javascriptでは同じことを、npm installコマンドやarn addコマンド一発で取り込めるよう対応している。また、Asset Pipelineを支えるビルドツールのSprocketsメンテ状況が良くない。

■バージョンアップ前の環境
・React.js： v15.6.2
・Ruby： 2.6.3
・react-rails： 2.4.7（Asset Pipeline方式）
・webpacker： 3.5.5

■バージョンアップ後の環境
・React.js： v16.8.6
・Ruby： '2.6.3'
・react-rails： 2.5.0（Webpack方式）
・webpacker： 4.0.7

■1. react-railsとwebpackerのバージョンアップ

▽詰まったところ

バージョンアップ対応当初は気づかなかったのだが、react-rails： 2.4.7を利用していると、React.jsのバージョンが15系に固定されるようだった（隣に座っている神エンジニアが発見してくださった）。元々、Asset Pipelineに15系のReact.jsとReactDOMのコードファイルを読み込ませていたのだが、これによって、React.jsが15系になっていたのではなかったのだと後から知った。。。

▽対応方法

react-railsとwebpacker gemのバージョンアップ

■2. babel-polyfillの置き換え

▽詰まったところ

厳密には詰まっていないが、各ブラウザに対応するため、元々、babel-polyfillというライブラリーをimportしていた箇所があった。Babelも最新の7系にしようと色々な情報を探したところ、大半は、@babel/polyfillを利用するようにとあったが、この方法の採用は実は非推奨になっていた。

▽対応方法

@babel/polyfillではなく、core-js/stableとregenerator-runtime/runtimeをimportする。
→背景としては、直近のBabelのバージョンアップで、Babel7.4.0から@babel/polyfill の利用は避ける方向になっていた。。。
参考： https://aloerina01.github.io/blog/2018-11-29-1

■3. PropTypesやライフサイクルメソッドの修正

▽詰まったところ

React.jsの16系から、prop-typesがReact.jsの本体から切り離された事を最初知らず、props関連のエラーが大量発生してしまった。

▽対応方法

import PropTypes from 'prop-types';する。
また、PropTypesの定義をオブジェクト形式での指定から以下のように変更した。

PropTypesの定義（他の書き方もあるが１例）

static get propTypes() {
  return {
    onSelect: PropTypes.func.isRequired
  }
}

■4. React.js17系で廃止予定のライフサイクルメソッド対応

※こちらは特に詰まっていない。以下を参考に対応した。
https://qiita.com/mori-dev@github/items/c0a458384b5390494784

▽対応方法

React.js17系で廃止予定のライフサイクルメソッドを洗い出し、先頭にUNSAFE_ を付与する対応を一括変換にて実行した（根本対応は時間がある際に対応する事にした）。

＜廃止予定のライフサイクルメソッド＞
・ componentWillMount
・ componentWillReceiveProps
・ componentWillUpdate

■5. .babelrcからbabel.config.jsへの変更

▽詰まったところ

途中、.babelrcかwebpack.config.jsに記載するものなのか、個人的に混乱してしまった。Compileが成功したりしなかったりしてエラーが分かりにくかったため、修正に修正を重ねて途中で動作しなくなり困ってしまった。。

▽対応方法

こちらは、隣に座ってる神エンジニアに相談したところ、あっさり解決された。。。
対応された内容は、react-rails のWebpack利用方式の初期コマンドを実行し、生成されたbabel.config.jsに必要な記述を加えただけとの事だった。

個人的に、.babelrcとbabel.config.js で何が異なるのか疑問だったため公式ページを参照した。
公式ページ： https://babeljs.io/docs/en/config-files#root-babelconfigjs-files

調べた結果としては、結論、どちらを利用して良いように思う。今回は、react-rails のWebpack利用方式の初期コマンドにてデフォルトで生成された方が安心という事で、babel.config.js を採用する事になった。

■最後に

バージョンアップ対応前は自分自身で何とか対応できるつもりだったが、実際対応してみると、利用しているライブラリの公式ページの読み込みが浅かったり、原点に立ち返って検証をやり直して解決のアタリを付けていなかったり等、やるべき事が全くできていなかったという反省しかない。。。

次に同じようなバージョンアップ対応があった時は、今回の反省を踏まえてリベンジしたい。