【Nuxt3RC4】useFetchの返り値がssrで取得できない他

Nuxt3の安定版が6月にリリース予定でしたが延期され、代わりにRC4が公開されました。 今回はRC4でAPIのデータが取得できない事象に見舞われましたので、その解決策です

事象と環境

まず発生条件ですが、RC4のbuild後の動作確認で発生しました。

yarn devでの開発時には発生しません。

実際発生したのは下記のconsole.errorが発生して、useFetchからAPIのデータが返ってきませんでした。

const { data: users } = await useFetch('/api/v1/user');
console.log('API return data is useFetch()', null);

こんな感じのAPI取得です。

今回はnuxtのAPIサーバーから取得してますが、多分外部サーバーを直接アクセスしても同じかもしれません。

念の為API自体にアクセスできているか確認

/server'/api/v1/user/index.tsで適当にconsole.logを出して実際にapiにアクセスできているかをまず確認しました。

が、普通にlogが出力され、期待されるデータを取得してました。

特に途中でエラーが発生してキャッチされている形跡もありませんでした。

実は他のエラーもあったが、それを解決

実はなんですが、build後にstartしてみるとターミナルにエラーログが発生していました（nuxt自体は起動していたので一旦無視していた）

[nitro] [dev] [unhandledRejection] ReferenceError: _unref is not defined

_unrefが定義されていませんとな。

ただしproject全体でgrepしても_unrefなんて使ってない。

少し調べてみるとv-bindでcssにvue変数を割り当てていると発生するようです。

<style lang="scss" scoped>
.container {
    --span: 0.5em;
    --sidebar-width: v-bind(sidebarwidth);
    --systembar-width: v-bind(systembarwidth);
}
</style>

本来はvueからunrefがオートインポートされるはずらしいのですが、それがされておらず未定義となっているようでした。

なので、v-bindを記載しているvueファイル全てに明示的にimportさせます。

<script setup lang="ts">
import { unref as _unref } from 'vue';

結果

すると[nitro] [dev] [unhandledRejection] ReferenceError: _unref is not definedが見事に消え、なぜかuseFetchでデータも正常に取得できました。

ちなみにuseFetchを記載しているvueファイルではv-bindを使用していませんが、app.vueのほうで使用しているため、全体に影響を及ぼしていたのだと思います。

一見関係なさそうなエラーでも実は関係するということがあるため、なにか不具合が生じたときはすべての異常を洗ったほうがいいですね。

※そもそもAPIからデータが帰らなかった場合も考慮してcatchしこめという話ですが（いずれかのHTTP Statusエラーは想定していたが、nullになるのは想定していなかった）