刹那(せつな)の瞬き

Willkömmen! Ich heiße Setsuna. Haben Sie etwas Zeit für mich?

Node.jsとReactの復習したら時代が変わってた

2020年に入って数年振りに Node.js を試したら、今時の React 関連もに触れたくなり、とある書籍のサンプルを試してました。

しかし、すんなり動くと思ってたところがエラーの山。
スムーズに行かなくて、心が折れかけましたよ。ホント。

その書籍は2017年発刊なので、時代が違う!と言っちゃえばそれまでなのですが、せっかく識者が著した学習教材なのに、無駄になるのは勿体無いです。

....

1. 環境

試した OS は、Ubuntu 18.04.3 LTS (Linux Kernel 5.3.0-26-generic) です。
Ubuntu のパッケージではなく、n package で lts な node をインストールします。

$ sudo apt install nodejs
$ sudo apt install npm
$ sudo npm install -g n
$ sudo n lts
$ echo export NODE_PATH=$(npm root -g) >> ~/.bashrc
$ source ~/.bashrc
$ sudo apt purge nodejs npm
$ sudo apt autoremove
$ sudo npm install -g yarn

これにより、which nodeの出力結果は/usr/bin/nodeではなく/usr/local/bin/nodeになります。

2. 現状把握

まずは、書籍サンプルの React プロジェクトと新規に作成したプロジェクトとのバージョン比較です。
npm init -yの後に必要なパッケージをインストールして、npm list --depth 0の出力結果を比較すると、こんな感じです。

2017年当時のとあるサンプル 2020年1月現在
node v10系?


node v12.14.1
npm 6.13.6
yarn 1.21.1
react@15.6.2 react@16.12.0
react-dom@15.6.2 react-dom@16.12.0
babel-core@6.26.3 @babel/core@7.8.3
babel-preset-es2015@6.24.1
または、babel-preset-env
@babel/preset-env@7.8.3

babel-preset-react@6.24.1 @babel/preset-react@7.8.3
babel-loader@7.1.5 babel-loader@8.0.6
webpack@2.7.0

webpack@4.41.5
webpack-cli@3.3.10

メジャーバージョンの差異は深刻です。
調べなきゃいけない事がありすぎて、頭痛いですね。

npm installで当時のバージョンをインストールしてくれるのですが、それでもエラーになってしまうプロジェクトがあると、新規に試してみるしかありません。

3. バージョン差異

今はいくつかあるサンプルプロジェクトを評価したいので、まずは実行できるように調整してみました。

(1) React v16

v15系→v16系で実行に関する問題はなかったです。
ただ、v16.3いくつかのメソッドの廃止が示唆されてました。

v17で廃止予定のメソッドは記述を変更しないとですね。
とりあえず、UNSAFE_をつけてしのぎます。

変更前 変更後
componentWillMount
componentWillReceiveProps
componentWillUpdate
UNSAFE_componentWillMount
UNSAFE_componentWillReceiveProps
UNSAFE_componentWillUpdate

副作用かー。setStateの件はまた後日。

(2) Babel 7とWebpack 4

そもそもインストールするパッケージ名が異なってます。
とりあえず、こんな感じでインストールしてみました。

$ npm install -D @babel/core @babel/preset-env @babel/preset-react
$ npm install -D babel-loader webpack webpack-cli

ネットに色々と情報があるので、説明は割愛します。例えば、

とか、参考になる記事はたくさんあります。

後は、webpack.config.jsが存在するなら、module.exportsentry:の前にmode: 'development',を追加して、presets: ["@babel/preset-env","@babel/preset-react"]にしておけば、動作するようになりました。

(3) Node.js

今回は一つだけ Node を v10 に下げないと動作しないパッケージがありました。物によっては Python2 を要求したり...

バージョンアップばかりが正義じゃないのは承知してます。
ですが、あまりに「環境に依存する」のは好みじゃないです。

4.所感

あくまで、書籍のサンプルを試したいだけなので、とりあえず動かす事に注力しました。

数年前の書籍なのに、その前提が古くなってしまってる現状。
なんとも言えない物哀しさを感じてしまうのは私だけでしょうか。