公開日:2022年12月12日

最終更新日:2022年12月12日

Nuxtでbuildすると画面遷移でTypeError: Cannot read properties of undefined (reading 'get')

現在Nuxtで絶賛ブログ移行構築中です。
あらかたできたかなってところで、本番サーバを用意して
実際に稼働するかテストしてみることにしました。

普段の開発の様子

普段はMacで開発しています。
npm run devで簡易サーバー(loclhost:3000)を建て挙動や見た目の構築をしています。

本番サーバーについて

これまで、当Wordpressブログはラズパイで構築したものです。
処理能力に不安を感じ、せっかくなので、その他のサーバーを構築しようと思い立ったのです。
Nuxtの公式ドキュメントにデプロイのことも書いてあるので、設定はほぼそのままです。
本番サーバーに開発中のプロジェクトをコピーし、
npm install → npm run build → npm run startで稼働させてました。
サーバ上でlocalhost:3000で確認。
おー。ちゃんと表示されている。

ところが画面遷移できない。

個別の記事のリンクをクリックして
そのページが出ると思った。しかし
TypeError: Cannot read properties of undefined (reading 'get')
んーなんかエラー。
試しにリロード。あっ出た。
この時は開発環境と本番環境の差が起きていると思っていた。
本来、開発環境と本番環境は揃えるものだが、今回は色々と検証のため
あえて異なる環境でやっています。

開発環境でstartしたときも同じ症状

もうサーバのせいではない。
buildがおかしいのだ。しかしエラーが出るわけではない。

結論:<nuxt-link>をやめた

参考記事:https://medium.com/veltra-engineering/ssr-behavior-of-nuxt-js-6d95f20afff0
今回、SSR(サーバーサイドレンダリング)を採用している。
<nuxt-link>はクライアントサイドでの遷移が行われようだ。
メソッドとしてはasyncDataをつかっている。
なので遷移先を直接呼び出したりリロードしたりしたときに
正しく表示されるのはこのためだった。
結局のところ、<nuxt-link>を使っていたところを<a>タグに書き換えたところ
正しく表示されたのであった。