改修：環境やパッケージが全体的に古いので更新する

ryoma-yama / issue-gantt-chart

Ganttchart for GitHub/GitLab issues.

GNU General Public License v2.0

0 stars 0 forks source link

改修：環境やパッケージが全体的に古いので更新する #1

Closed ryoma-yama closed 1 month ago

ryoma-yama commented 1 month ago

どうしたいか

Node, 依存関係, その他
- 現状で動くNode16は数年前にEOLなのでNG。

どうするか

[x] Nodeのバージョンを最新化する
[x] 依存関係の最新版を把握する。このときすでにメンテナンスがされていないものや非推奨のものがあれば外して代替のものを入れる。
[x] 依存関係を更新する。

追加で入れるもの

TypeScript: APIスキーマ定義したいので
Biome: Prettier/ESLintから離れられるいい機会なので。

想定される問題

[ ] 現状のコードは当然Node最新版で動いていないので動かなくなった部分を頑張って直す作業が発生する

その他

TypeScript対応は別イシューでいいかも

ryoma-yama commented 1 month ago

MUIはv5でStylingライブラリをJSSからEmotionに切り替えたのでアップデートとコードの修正をする。

# remove
pnpm remove @material-ui/core @material-ui/icons @material-ui/lab
# add
pnpm add @mui/material @mui/styles @mui/lab @mui/icons-material @emotion/react @emotion/styled

# codemodを適用して修正する
npx @mui/codemod@latest v5.0.0/jss-to-styled .\src\components\Toolbar
npx @mui/codemod@latest v5.0.0/preset-safe .\src\components\Toolbar

その他、自動修正されない部分について手動で修正。

最後にコンソールに出てたエラーは拡張機能のScriptsAutoRunnerだったので無関係。

ryoma-yama commented 1 month ago

開発サーバーをreact-scriptsからviteに移行する。非推奨のライブラリに多く依存しすぎているし何より公式ももう使っていないので

pnpm remove react-scripts
pnpm add vite @vitejs/plugin-react

その他

vite.config.jsを手動で追加
拡張子をjsからjsxに修正
index.htmlをルートに移動（ファイル構成が異なる）