⬆️

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

2022/08/18に公開

Nuxt

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

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

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

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

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

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

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

解決策

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

Discussion