⬆️

Nuxt3をrc6からrc8にアップデートするときの注意

2022/08/18に公開

2022春にNuxt3のRCがリリースされました。
この夏にはStableリリースが予定されているようです。

https://v3.nuxtjs.org/community/roadmap/

Stableの公開はまだですがRC版のアップデートは進んでおり
2022年8月11日にv3.0.0-rc.7が
2022年8月12日にv3.0.0-rc.8が公開されています。

私は個人開発のリポジトリで試験的にNuxt3を使っており
CSSフレームワークとしてTailwindCSS
アイコンライブラリとして@heroicons/vueを導入しています。
v3.0.0-rc.6 から v3.0.0-rc.8 へアップデートしたところエラーが発生し
画面の描画に失敗するようになりました。

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/app/node_modules/@heroicons/vue/outline' is not supported resolving ES modules imported from /app/.nuxt/dist/server/server.mjs
Did you mean to import @heroicons/vue/outline/index.js?

解決策

build設定で@heroicons/vueをtranspileする

nuxt.config.ts
export default defineNuxtConfig({
  buildModules: ['@nuxtjs/tailwindcss'],
+ build: {
+   transpile: ['@heroicons/vue']
+ }
})

参考のissue

https://github.com/nuxt/framework/issues/6585

このissueにあるように、v3.0.0-rc.7の時点でエラーが発生するようです。

なぜtranspileを追加する必要があるのか

@heroicons/vueがインポートされたES Modules(以下ESMと記載)解決をサポートしていないのが原因です。

https://github.com/tailwindlabs/heroicons/issues/564

今回のようにESM対応していないモジュールはnuxt.configのbuild.transpileに追加することで、Nuxtがこのライブラリを読み込まずに動いてくれるようです。

https://v3.nuxtjs.org/guide/going-further/esm#transpiling-libraries


(v3.0.0-rc.6までtranspileなしで動いていたのはなぜ...?)

Discussion

ログインするとコメントできます