たくさんの自由帳

Vite 6 と React 19 移行メモ

投稿日 : | 0 日前

文字数(だいたい) : 3401

目次

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

最新バージョンに追従していく

Vite / React / Tailwind CSS / esbuildを使ってるプロジェクトの現状です。
Viteで何か怒られています。もうついでにVite 6にして解決させようと。あとReact 19が出ててこれもやらなきゃなんだよな。

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

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
vite v5.1.4 building for production...
transforming (2) ..\vite\modulepreload-polyfill.jsBrowserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
✓ 75 modules transformed.
rendering chunks (1)...

Inlining: index-CH6DdFSF.js
Inlining: style-Na_izZ1e.css
../dist/index.html  267.46 kB │ gzip: 74.19 kB
✓ built in 2.20s

> 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 44ms
PS C:\Users\takusan23\Desktop\Dev\FigmaPlugin\yajirushi-mode>

なんかヤバそうな文章が

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

環境

このプロジェクトはFigmaのプラグインなんですが、Figma関係ないところの作業なんですよね。
https://www.figma.com/community/plugin/1344710416431362546
ライブラリ。重要そうなところを抜粋
移行前のpackage.jsonを全部見たい場合は↓

yajirushi-mode/package.json at 6c818ffd4757e5e2ef1c2f678314517a88fb0b03 · takusan23/yajirushi-mode

Contribute to takusan23/yajirushi-mode development by creating an account on GitHub.

https://github.com/takusan23/yajirushi-mode/blob/6c818ffd4757e5e2ef1c2f678314517a88fb0b03/package.json

"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 にした

Announcing Vite 6

Vite 6 Release Announcement

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

Troubleshooting

Next Generation Frontend Tooling

https://vite.dev/

  • 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のセットアップをミスったか

[vite] Internal server error: Failed to load PostCSS config · Issue #836 · QwikDev/qwik

Qwik Version "@builder.io/qwik": "0.0.38", "@builder.io/qwik-city": "0.0.23" Operating System (or Browser) Win10 Node Version (if applicable) 16.13.1 (Currently using 64-bit executable) Which compo...

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で書けるならこっちにしておくか

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>
見たい方がいるかわかりませんが一応差分です。

Vite 6 にした。あと ESM に移行しました。 · takusan23/yajirushi-mode@d526b34

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

React 19 にする

React 19 アップグレードガイド – React

The library for web and native user interfaces

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コマンドを叩いたらこれ。

Documentation - TypeScript 5.5

TypeScript 5.5 Release Notes

Imgur

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

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

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

おわりに

該当リポジトリです

GitHub - takusan23/yajirushi-mode

Contribute to takusan23/yajirushi-mode development by creating an account on GitHub.

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

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

ごあんない

次の記事

自作 MOD の Minecraft 1.21.4 移行メモ

2025/1/5

前の記事

Android で HDR 動画の撮影、動画編集アプリを作る

2024/12/31

関連記事

Figma プラグインを作って図形を矢印で繋げられるようにした話（ReactとVite）

投稿