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
ネットに色々と情報があるので、説明は割愛します。例えば、
- babel/webpackを使ってJavaScriptのソースをリリース用に整備する | marketechlabo
- Webpack4でReactの環境構築。Create react appを使わずにReactアプリを作る。- 1 -Babel, React Hot Loader-
とか、参考になる記事はたくさんあります。
後は、webpack.config.js
が存在するなら、module.exports
のentry:
の前にmode: 'development',
を追加して、presets: ["@babel/preset-env","@babel/preset-react"]
にしておけば、動作するようになりました。
(3) Node.js
今回は一つだけ Node を v10 に下げないと動作しないパッケージがありました。物によっては Python2 を要求したり...
バージョンアップばかりが正義じゃないのは承知してます。
ですが、あまりに「環境に依存する」のは好みじゃないです。
4.所感
あくまで、書籍のサンプルを試したいだけなので、とりあえず動かす事に注力しました。
数年前の書籍なのに、その前提が古くなってしまってる現状。
なんとも言えない物哀しさを感じてしまうのは私だけでしょうか。