たくさんの自由帳
Androidのお話
たくさんの自由帳
投稿日 : | 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
関係ないところの作業なんですよね。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
を上げた。
ビルドできるしスタイリングもされてそう。
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.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
をわざわざ作ったのは多分この辺に書いてありそう
.mjs とは何か、またはモジュールベース JS とエコシステムの今後 | blog.jxck.io
長いこと議論になっていた ES Modules の Node における扱いに一応の決着が付き、.mjs という拡張子が採択された。この拡張子の意味と、今後ブラウザと合わせて Universal JS を実装していく上での作法が見えてきたことになる。合わせてエコシステムが対応...
https://blog.jxck.io/entries/2017-08-15/universal-mjs-ecosystem.html
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
のセットアップをミスったか
どうやら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
で書けるならこっちにしておくか
Enable ESM and TS based config files by RobinMalfait · Pull Request #10785 · tailwindlabs/tailwindcss
This PR adds support for loading and scaffolding ESM and TypeScript config files. ESM and TS syntax support Prior to this PR, your tailwind.config.js file had to be in CommonJS format. This was sur...
https://github.com/tailwindlabs/tailwindcss/pull/10785
Tailwind CSS v3.3: Extended color palette, ESM/TS support, logical properties, and more
Tailwind CSS v3.3 is here — bringing a bunch of new features people have been asking for forever, and a bunch of new stuff you didn't even know you wanted.
https://tailwindcss.com/blog/tailwindcss-v3-3
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
に付随する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
勝手に書き直してくれるそう、使ったこと無いので使ってみる。git
あるからすぐ戻せるし。えいっ
npx codemod@latest react/19/migration-recipe
a
キーを押してすべてのcodemod
にチェックを付け、enter
で実行。git
にコミットしてない差分が残ってるけどお前やるか?って聞かれたのでenter
。やります。npm i
したときにpackage.json
書き換わってるだけなので。
・・・何も変わっていない。
本当にこれでいいのか、ちゃんとマイグレーションガイドを読みます。
よくわからんけど読んだ。ペライチReact
アプリだから、そもそもそんなに使ってない。からいいか。
tsc
コマンドを叩いたらこれ。
グローバル値と競合するため、'isolatedModules' が有効な場合は、型のみのインポートで宣言する必要があります。ts(2865)
どうやらimport
で使った名前と同じ名前の関数があるのが原因っぽい?
名前変えたら直った(えっ)
(alias) type ArrowDirection = "endSide" | "startSide" | "startAndEndSide"
import ArrowDirection
function ArrowDirection({ arrowDirection, onChange }: ArrowDirectionProps): JSX.Element
該当リポジトリです
以上です、お疲れ様でした ノシ