なんかずっとnodejsのモジュールのアップデートしてる気がするな。
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");
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");
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;
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);
});
前はpluginの設定が多いという感じだったけど、最新だと一部coreの設定になってる感じ。
まとめ
下手な労働よりきつい。
