レガシー環境から脱却したい

プログラミングや環境構築の話をまとめています。

Nuxt.jsで「Cannot read property '_normalized' of undefined」エラーが出た

f:id:odaryo:20200901175501p:plain

Nuxt.jsで静的サイトを作っていたときに、下記エラーが出るようになりました。

[error]  /blog

TypeError: Cannot read property '_normalized' of undefined
    at normalizeLocation (/opt/build/repo/front/node_modules/vue-router/dist/vue-router.common.js:971:12)
    at VueRouter.resolve (/opt/build/repo/front/node_modules/vue-router/dist/vue-router.common.js:3015:18)
    at a.render (/opt/build/repo/front/node_modules/vue-router/dist/vue-router.common.js:1062:22)
    at a.t._render (/opt/build/repo/front/node_modules/vue/dist/vue.runtime.common.prod.js:6:35273)
    at /opt/build/repo/front/node_modules/vue-server-renderer/build.prod.js:1:70637
    at Yi (/opt/build/repo/front/node_modules/vue-server-renderer/build.prod.js:1:67201)
    at io (/opt/build/repo/front/node_modules/vue-server-renderer/build.prod.js:1:70613)
    at ro (/opt/build/repo/front/node_modules/vue-server-renderer/build.prod.js:1:70244)
    at _t.eo [as renderNode] (/opt/build/repo/front/node_modules/vue-server-renderer/build.prod.js:1:67491)
    at _t.next (/opt/build/repo/front/node_modules/vue-server-renderer/build.prod.js:1:20507)
    at n (/opt/build/repo/front/node_modules/vue-server-renderer/build.prod.js:1:18719)
    at /opt/build/repo/front/node_modules/vue-server-renderer/build.prod.js:1:68602
    at _t.eo [as renderNode] (/opt/build/repo/front/node_modules/vue-server-renderer/build.prod.js:1:68610)
    at _t.next (/opt/build/repo/front/node_modules/vue-server-renderer/build.prod.js:1:20507)
    at n (/opt/build/repo/front/node_modules/vue-server-renderer/build.prod.js:1:18719)
    at /opt/build/repo/front/node_modules/vue-server-renderer/build.prod.js:1:68602

開発環境のyarn devでは出ず、本番用ビルドのyarn generateで発生。

原因

nuxt-linkの内容がundefinedだったため。

例:

<nuxt-link :to='link'>リンク</nuxt-link>

↑のようなコードでlink変数がundefinedとなっていました。

開発環境でSSRで動いているときはデータを都度取得していたのに対し、 静的ビルドのときはpayloadで予めデータを取得していました。 そのpayloadの書き方がまずく、データが取れていなかったのが原因でした。

分かってみれば簡単なことですが、
1行目のTypeError: Cannot read property '_normalized' of undefinedだけ読んでも意味不明。 内容にvue-routerの記載があるのでルーティング周りかなと思ったものの、場所がわからずなかなか特定できませんでした。