2023/11/16 Vite v5がリリースされました⚡️
リリースから2ヶ月経ちライブラリ側のサポートも揃ってきたので、 個人のWebサービスをVite 4系からVite v5系にアップデートしたので対応したこととかをメモしておきます📝
前提事項
利用しているライブラリは以下のような感じです。(Ruby on Railsのサービスでフロントエンド関連のファイルのビルドにViteを利用しています。)
- vite_rails: v3.0.17
- histoire v0.17.8
- Vue.js v3.4.15
- TypeScript v5.3.3
- Sass v1.70.0
Vite v5アップデートで対応したこと
以下のドキュメントに公式のマイグレーションガイドがあるので読みつつ進めました。
以下に具体的に必要だった対応事項を記載します。
Vite v5 からCSSファイルはトップレベルに含まれなくなったのでstylesheet_pack_tagの利用をやめる
以下の通りVite v5 からCSSファイルはminifest.jsonのトップレベルに含まれなくなりました。
対応する CSS ファイルは manifest.json ファイルのトップレベル項目としてリストされない Vite 4 では、JavaScript エントリーポイントに対応する CSS ファイルもマニフェストファイル (build.manifest) のトップレベルエントリーとしてリストされていました。 これらのエントリーは意図せずに追加されたもので、単純な場合にのみ機能しました。 https://ja.vitejs.dev/guide/migration.html#%E5%AF%BE%E5%BF%9C%E3%81%99%E3%82%8B-css-%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AF-manifest-json-%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E3%83%88%E3%83%83%E3%83%95%E3%82%9A%E3%83%AC%E3%83%98%E3%82%99%E3%83%AB%E9%A0%85%E7%9B%AE%E3%81%A8%E3%81%97%E3%81%A6%E3%83%AA%E3%82%B9%E3%83%88%E3%81%95%E3%82%8C%E3%81%AA%E3%81%84
元々は以下のような感じでトップレベルのCSSを直接参照していたのですが上記の破壊的変更によりよみこめなくなりエラーとなっていました。
<%= vite_stylesheet_tag 'application' %>
読み込めなくなっていたもののvite_javascript_tagの以下の処理でentryのjs配下のcssがstylesheet_link_tagで挿入されるため、
def vite_javascript_tag(*names, # 省略 # 省略 tags << stylesheet_link_tag(*entries.fetch(:stylesheets), media: media, **options) unless skip_style_tags tags end
stylesheet_pack_tagの利用自体が不要だったので削除しました。
- <%= vite_stylesheet_tag 'application' %>
Vite v5からcjsが非推奨になったのでpackge.jsonのtypeをmoduleに変更する
以下の通りVite v5から CJS Node API の非推奨化され警告が出ていたので、
CJS Node API の非推奨化 Vite の CJS Node API は非推奨になりました。 今後、require('vite') を呼ぶときは、非推奨の警告メッセージが出力されます。 ファイルやフレームワークを更新して、代わりに Vite の ESM ビルドをインポートするとよいでしょう。 https://ja.vitejs.dev/guide/migration.html#cjs-node-api-%E3%81%AE%E9%9D%9E%E6%8E%A8%E5%A5%A8%E5%8C%96
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.
以下のようにcjsの記法をESM形式に修正する or ファイルの拡張子を.cjsに修正し、
- const autoprefixer = require("autoprefixer"); + import autoprefixer from 'autoprefixer'; + import tailwindcss from 'tailwindcss'; - module.exports = { - plugins: [require("tailwindcss"), autoprefixer({ grid: true })], + export default { + plugins: [tailwindcss, autoprefixer({ grid: true })], };
package.jsonのtypeをmoduleに変更しました。
+ "type": "module",
historeによるコンポーネントカタログのbuild時に、まだ警告が出ていますがhistoire側の問題なので対応していません
おわりに
基本的にVite公式のマイグレーションガイドに従ってバージョンアップできました🙌 日本語訳もあり非常にありがたかったです・・・！
