みなさんこんにちは！
イザナギです。
Nuxt3がいつの間にか「rc3」になってましたね。
https://v3.nuxtjs.org/
正式リリースが近づいてきていそう！
でも、公式サイトを見てみると「Static sites」「Vite」とかが「Experimental（実験的）」となっているので、もう少し先なのかも知れませんね。（2022/06/05現在）
正式リリースが楽しみです。
さて今回は、その実験的な「Static sites」を使ってみた時に発生したエラーについて書いていきます。
npx nuxi generateを試してみる
前回から引き続き、Nuxt3でブログサイトをリニューアルなのですが、簡易的ですがデザインができてきたので、「npx nuxi generate」を使って、静的なhtmlを作ってみます。
https://v3.nuxtjs.org/api/commands/generate
突然謎のエラーが！
「npx nuxi build」や「npx nuxi dev」では、エラー吐いていなかったので、問題なく行けるのではと思っていたのですが...
ターミナルを確認してみると、以下エラーが発生していました。
[nuxt] [request error] Cannot find module '/myapp/.nuxt/prerender/chunks/app/modules/a11y/a11y.js' imported from ~
なんだこれ？
buildやdevの時には、発生していなかったのに、なぜgenerate時だけ？
そもそも「a11y」どっかで使ってたっけ？
コード内を探索してみると、なんとSwiperにて実装したコード内に記載してありました。
（自分で書いたのに忘れてた...）
どうやら、Vueファイルで以下のように読み込んだだけでは、今回のようなエラーが出る模様
import { A11y, Autoplay } from 'swiper';
対処方法
githubのissuesに似たようなエラーがあったので、同じように「nuxt.config.ts」にbuild.transpileを追加
https://github.com/nuxt/framework/issues/4399
import { defineNuxtConfig } from 'nuxt3';
export default defineNuxtConfig({
build: {
transpile: ['swiper'],
},
});
上記コード追加後、再度generateしてみると、静的ファイルの作成に成功しました！
まとめ
Nuxt3で「swiper」を使うときは「nuxt.config.ts」にbuild.transpileを追加しないと、generate時にエラーが発生するみたいなので、みなさんも気をつけてください。
それにしても今、回は結構あっさり解決方法が見つかってよかった。
今回のエラー以外にも、まだ修正しないといけない部分がるみたいなので、もう少し頑張らないとですね！
それでは、また次回の記事更新時にお会いしましょう。