みなさんこんにちは！
イザナギです。
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時にエラーが発生するみたいなので、みなさんも気をつけてください。
それにしても今、回は結構あっさり解決方法が見つかってよかった。
今回のエラー以外にも、まだ修正しないといけない部分がるみたいなので、もう少し頑張らないとですね！
それでは、また次回の記事更新時にお会いしましょう。