Nuxt3「nuxi build --prerender」 を実行したときに、「request error」が発生した...

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

2024 - Izanagi's Site