たくさんの自由帳

Vite 6 と React 19 移行メモ

投稿日 : 2025/1/1 | 0 日前

文字数(だいたい) : 3401

最新バージョンに追従していく
環境
あんまり影響無さそうなライブラリアップデート
Vite 6 にした
Vite の警告に対応するため type module
動かない
Tailwind CSS と PostCSS を ESM の書き方にする
React 19 にする
codemod 使ってみる
TypeScript TS2865 エラーが出ている
おわりに

あけましておめでとうございます。

環境

このプロジェクトはFigmaのプラグインなんですが、Figma関係ないところの作業なんですよね。
https://www.figma.com/community/plugin/1344710416431362546

ライブラリ。重要そうなところを抜粋
移行前のpackage.jsonを全部見たい場合は↓
https://github.com/takusan23/yajirushi-mode/blob/6c818ffd4757e5e2ef1c2f678314517a88fb0b03/package.json#L1

"i18next": "^23.10.0"
"react": "^18.2.0"
"react-dom": "^18.2.0"
"react-i18next": "^14.0.5"
 
"esbuild": "0.20.1"
 
"vite": "^5.1.4"
"vite-plugin-singlefile": "^2.0.0"
"vite-plugin-svgr": "^4.2.0"
 
"postcss": "^8.4.35"
"tailwindcss": "^3.4.1"
"autoprefixer": "^10.4.17"
 
"typescript": "^5.3.2"

あんまり影響無さそうなライブラリアップデート

esbuild、TypeScript、Tailwind CSSを上げた。
ビルドできるしスタイリングもされてそう。

Vite 6 にした

https://vite.dev/blog/announcing-vite6

npm install -D vite

なんか普通にビルドできる。リンク先を見るとVite 6で削除ってあるけど、なんかビルドできている。。。

The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
vite v6.0.6 building for production...
✓ 72 modules transformed.
rendering chunks (1)...

Vite の警告に対応するため type module

https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated

vite.config.tsはESM 構文か
- export defaultなのでCJSじゃなくESMっぽいんだよな
package.jsonに"type": "module"を追加するか、該当ファイルを.mjs、.mtsの拡張子に変更する

わからん...
そもそもCJS時代を知らんからESMなはずなんだよな（よくわからん）

{
  "name": "yajirushi-mode",
  "version": "1.0.0",
  "description": "自分のFigmaプラグイン",
  "main": "code.js",
+ "type": "module",
  "scripts": {

とりあえず"type": "module"を足してみる

ちなみにCJSがCommonJS、ESMがES Modulesの略で
CJSだとrequire() / module.exports = ...、ESMだとimport / export default ...みたいな書き方を言うそうです。

なんで2つもあるんって話は調べてもらえば分かるのですが、ブラウザだと<script src="...">でライブラリを追加できたのが、Node.jsだとそもそもhtmlを書かないのでライブラリを読み込ませる手段がないってことで作られたそう。
のちに言語仕様として逆輸入されるのですがその際は後者の構文が採用されました（なんでCJSが採用されんかったのかは追えてない）。

ESMをわざわざ作ったのは多分この辺に書いてありそう

動かない

vite v6.0.6 building for production...
✓ 5 modules transformed.
x Build failed in 108ms
error during build:
[vite:css] Failed to load PostCSS config (searchPath: C:/Users/takusan23/Desktop/Dev/FigmaPlugin/yajirushi-mode/src-ui): [ReferenceError] module is not defined in ES module scope

PostCSSはTailwind CSSで使ってるやつですね、で
Failed to load PostCSS configはなんだろう。Vite + Tailwind CSSのセットアップをミスったか

https://github.com/QwikDev/qwik/issues/836

Tailwind CSS と PostCSS を ESM の書き方にする

どうやらtailwind.config.jsとpostcss.config.jsがCJSの書き方なのに、package.jsonに"type": "module"を足したことにより全てがESMとして扱われ、CJSが読み込めなくなってそう。
最短ルートとしては、tailwind.config.jsとpostcss.config.jsがCJSであることを示すため拡張子を.cjsにするのが早そう？

と思ったらTailwind CSSがESMでセットアップできるようになってそう
よくわからんけどESMで書けるならこっちにしておくか

https://github.com/tailwindlabs/tailwindcss/pull/10785
https://tailwindcss.com/blog/tailwindcss-v3-3#esm-and-typescript-support
- 公式アナウンス

npx tailwind initコマンドがESMに対応して、package.jsonで"type": "module"を使ってると認識した時、export defaultの形で出せるようになったそう。
適当に新規プロジェクトを作ったときのtailwind.config.tsとpostcss.config.jsを貼っておきます。ESMです！！！

tailwind.config.ts

import type { Config } from 'tailwindcss'
 
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config

postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

というわけでこれの書き方にすれば"type": "module"に書き足すだけで終わり！！
雰囲気で直せるはず。

というわけで直してみた。ちゃんとビルド出来てます。

PS C:\Users\takusan23\Desktop\Dev\FigmaPlugin\yajirushi-mode> npm run build
 
> yajirushi-mode@1.0.0 build
> npm run build:ui && npm run build:plugin -- --minify
 
 
> yajirushi-mode@1.0.0 build:ui
> npx vite build --minify esbuild --emptyOutDir=false
 
vite v6.0.6 building for production...
✓ 72 modules transformed.
rendering chunks (1)...
 
Inlining: index-BLKDaB2f.js
Inlining: style-DxF5_FC1.css
../dist/index.html  268.13 kB │ gzip: 74.94 kB
✓ built in 2.01s
 
> yajirushi-mode@1.0.0 build:plugin
> esbuild src-plugin/code.ts --bundle --target=es2015 --outfile=dist/code.js --minify
 
 
  dist\code.js  4.2kb
 
Done in 8ms
PS C:\Users\takusan23\Desktop\Dev\FigmaPlugin\yajirushi-mode>

見たい方がいるかわかりませんが一応差分です。
https://github.com/takusan23/yajirushi-mode/commit/d526b34be74fbca0a9a8a0a86b9307f799122a81

React 19 にする

https://ja.react.dev/blog/2024/04/25/react-19-upgrade-guide

reactに付随するreact-i18next周りもやるか。
まずアップデートするか。

npm install --save-exact react@^19.0.0 react-dom@^19.0.0
npm install --save-exact @types/react@^19.0.0 @types/react-dom@^19.0.0

react-i18next使ってるのでそれらも

npm install react-i18next i18next --save

codemod 使ってみる

勝手に書き直してくれるそう、使ったこと無いので使ってみる。gitあるからすぐ戻せるし。えいっ

npx codemod@latest react/19/migration-recipe

aキーを押してすべてのcodemodにチェックを付け、enterで実行。gitにコミットしてない差分が残ってるけどお前やるか？って聞かれたのでenter。やります。
npm iしたときにpackage.json書き換わってるだけなので。

・・・何も変わっていない。
本当にこれでいいのか、ちゃんとマイグレーションガイドを読みます。

よくわからんけど読んだ。ペライチReactアプリだから、そもそもそんなに使ってない。からいいか。

TypeScript TS2865 エラーが出ている

tscコマンドを叩いたらこれ。

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-5.html#isolated-declarations

Imgur

グローバル値と競合するため、'isolatedModules' が有効な場合は、型のみのインポートで宣言する必要があります。ts(2865)

どうやらimportで使った名前と同じ名前の関数があるのが原因っぽい？
名前変えたら直った（えっ）

(alias) type ArrowDirection = "endSide" | "startSide" | "startAndEndSide"
import ArrowDirection
function ArrowDirection({ arrowDirection, onChange }: ArrowDirectionProps): JSX.Element

おわりに

該当リポジトリです

https://github.com/takusan23/yajirushi-mode

以上です、お疲れ様でしたﾉｼ

最新バージョンに追従していく
環境
あんまり影響無さそうなライブラリアップデート
Vite 6 にした
Vite の警告に対応するため type module
動かない
Tailwind CSS と PostCSS を ESM の書き方にする
React 19 にする
codemod 使ってみる
TypeScript TS2865 エラーが出ている
おわりに