Nuxt.jsで「Uncaught (in promise) TypeError: Cannot redefine property:」
今回はNuxt.jsを使用しているときに下記のようなエラーが起きたときの原因についてお話ししていきます。
|
1 2 3 4 5 6 7 8 9 10 11 |
nuxt.js:250 Uncaught (in promise) TypeError: Cannot redefine property: $updateStatus at Function.defineProperty (<anonymous>) at defineGetter (nuxt.js:250:10) at nuxtApp.provide (nuxt.js:98:5) at default.vue:139:11 at runtime-core.esm-bundler.js:2687:40 at callWithErrorHandling (runtime-core.esm-bundler.js:199:19) at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:206:17) at hook.__weh.hook.__weh (runtime-core.esm-bundler.js:2667:19) at invokeArrayFns (shared.esm-bundler.js:85:10) at unmountComponent (runtime-core.esm-bundler.js:5800:7) |
Nuxt.jsのバージョンは3.11.2です。
Nuxt.jsで「Uncaught (in promise) TypeError: Cannot redefine property:」
このエラーはnuxtApp.provide('updateStatus’, setStatus)のようなprovideを使った書き方について、$updateStatusプロパティを再定義しようとしていることに起因しております。
Vueのアプリケーション内で同じプロパティ名が複数回provideされると、このエラーが発生する可能性があるようです。
例えば、私の場合はonBeforeUnmountでnuxtApp.provide('updateStatus’, null)のようにイベントリスナーを解除しておりましたが、onUnmountedなどでイベントリスナーを解除すると解決できました。
|
1 2 3 4 |
onUnmounted(() => { // イベントリスナーを解除 nuxtApp.provide('updateStatus', null) }) |
あとはprovideやunprovideする代わりにPiniaまたはコンポーネントのpropsなどを使ってデータのやり取りを行えば解決しそうです。
終わりに
今回はNuxt.jsを使用しているときに冒頭のようなエラーが起きたときの原因についてお話しいたしました。