reactやwebpackの最新版に追随する

なんかずっとnodejsのモジュールのアップデートしてる気がするな。

nodejsのモジュールアップデート方法
nodejs自体のアップデート
typescriptやeslintでどうしても直せないエラー
react-router v6
webpackの設定が変わった
まとめ

nodejsのモジュールアップデート方法

忘れるので書いておく

ncuを入れる npm i npm-check-updates -g
ncu を実行してバージョンアップしたモジュールを確認
大丈夫そうなものを ncu -u module1 module2 などして package.json をアップデート
yarn install でアップデートしたものをインストール
yarn start でbuild&run
一通り動作確認して問題なさそうならcommit&push
ダメそうなエラーの場合は rm -Rf node_modules yarn.lock してやり直し
いけそうなエラーの時は頑張って追随する

やること自体は簡単なんだよな。根気がいるだけで。

nodejs自体のアップデート

ローカルの環境が0.14とかでだいぶ古かったので0.16に追随。

そうしたらビルド時にエラーが出るようになる。

error:03000086:digital envelope routines::initialization error

opensslのハッシュ関数の問題らしい。バージョンを下げろとも書いてあったけど、オプションで対応できるっぽいので、package.json を修正。

--openssl-legacy-provider を追加する。

  "scripts": {
    "start": "react-scripts --openssl-legacy-provider start",
  }

typescriptやeslintでどうしても直せないエラー

今回はmdbreactで下記のエラーが出て全然進まなかった。

'MDBModal' cannot be used as a JSX component.

react-domの内部構造の変更に追随できていない感じかな？と思って小一時間いろいろと試したがどうにもならん。

もうちょっと再現コードを書くべきかもしれんが、労働ならともかく、趣味のプロダクトにおいては時間をかけても解決しない気配がして、テンション下げないように // @ts-ignore した。未来の俺まかせた、たぶん未来の俺キレる。

正しく直したいのもそうだけど、typescript系はハマるとマジで時間が解けていくので、勇気をもって今は対処しないという選択肢をもっていこうと思う。

react-router v6

だいたいまとまってる。ありがとうクラメソさん。

単純な置き換えと、あとはRouteの型変更への追随。 exactを消して、component を element にして、変数の中身はタグにする。

beforeから

<Route exact component={moge} />

afterにする感じ。

<Route element={<moge />} />

webpackの設定が変わった

公式のドキュメントを見るのが結局一番早かった。

chunkにしないために独自ビルドスクリプトを作ってたので修正。

修正前。

'use strict';

if (!process.env.npm_package_config_project) {
  throw 'env "npm_package_config_project" is not set';
}

process.env.NODE_ENV = 'production';

const project = process.env.npm_package_config_project;
console.log("Building", project, "...");

const webpack = require('webpack');
const config = require('react-scripts/config/webpack.config.js')("production");

// disable file chunk
config.output.filename = './static/' + project + '/js/bundle.js';
config.optimization.splitChunks = { cacheGroups: { default: false } };
config.optimization.runtimeChunk = false;
config.module.rules[1].oneOf[8].options.name = "static/" + project + "/media/[name].[hash:8].[ext]";

for (const p of config.plugins) {
  const o = p.options;
  if (o && o.filename && o.filename.match(/\.css$/)) {
    o.filename = './static/' + project + '/css/bundle.css';
  }
}

webpack(config).run((err) => {
  console.log("Build complete.");
  console.log("Error is", err);
});

修正後。

'use strict';

if (!process.env.npm_package_config_project) {
  throw 'env "npm_package_config_project" is not set';
}

process.env.NODE_ENV = 'production';

const project = process.env.npm_package_config_project;
console.log("Building", project, "...");

const webpack = require('webpack');
const config = require('react-scripts/config/webpack.config.js')("production");

// disable js file chunk
config.output.asyncChunks = false;
config.output.filename = './static/' + project + '/js/bundle.js';
config.output.assetModuleFilename = "static/" + project + "/media/[name].[hash:8][ext]";
config.optimization.runtimeChunk = false;

// disable css file chunk
for (const p of config.plugins) {
  const o = p.options;
  if (o && o.filename && o.filename.match(/\.css$/)) {
    o.filename = './static/' + project + '/css/bundle.css';
  }
}

// build
webpack(config).run((err) => {
  console.log("Build complete.");
  console.log("Error is", err);
});

前はpluginの設定が多いという感じだったけど、最新だと一部coreの設定になってる感じ。

まとめ

下手な労働よりきつい。

ツー

日常の記録