fix(nuxt): force asyncData errorValue/value to be undefined

Author: danielroe

packages/nuxt/src/app/composables/asyncData.ts

@@ -296,7 +296,7 @@ export function useAsyncData<
 
     const isWithinClientOnly = instance && (instance._nuxtClientOnly || inject(clientOnlySymbol, false))
 
-    if (fetchOnServer && nuxtApp.isHydrating && (asyncData.error.value || asyncData.data.value !== asyncDataDefaults.value)) {
+    if (fetchOnServer && nuxtApp.isHydrating && (asyncData.error.value || asyncData.data.value !== undefined)) {
       // 1. Hydration (server: true): no fetch
       if (pendingWhenIdle) {
         asyncData.pending.value = false
@@ -333,7 +333,7 @@ export function useAsyncData<
       }
     }
     const unsubKey = watch(key, (newKey, oldKey) => {
-      const hasRun = nuxtApp._asyncData[oldKey]?.data.value !== asyncDataDefaults.value
+      const hasRun = nuxtApp._asyncData[oldKey]?.data.value !== undefined
       if (oldKey && oldKey !== newKey) {
         unregister(oldKey)
       }
@@ -486,7 +486,7 @@ export function useNuxtData<DataT = any> (key: string): { data: Ref<DataT | unde
 
   // Initialize value when key is not already set
   if (!(key in nuxtApp.payload.data)) {
-    nuxtApp.payload.data[key] = asyncDataDefaults.value
+    nuxtApp.payload.data[key] = undefined
   }
 
   if (nuxtApp._asyncData[key]) {
@@ -548,16 +548,16 @@ export function clearNuxtData (keys?: string | string[] | ((key: string) => bool
 
 function clearNuxtDataByKey (nuxtApp: NuxtApp, key: string): void {
   if (key in nuxtApp.payload.data) {
-    nuxtApp.payload.data[key] = asyncDataDefaults.value
+    nuxtApp.payload.data[key] = undefined
   }
 
   if (key in nuxtApp.payload._errors) {
-    nuxtApp.payload._errors[key] = asyncDataDefaults.errorValue
+    nuxtApp.payload._errors[key] = undefined
   }
 
   if (nuxtApp._asyncData[key]) {
     nuxtApp._asyncData[key]!.data.value = unref(nuxtApp._asyncData[key]!._default())
-    nuxtApp._asyncData[key]!.error.value = asyncDataDefaults.errorValue
+    nuxtApp._asyncData[key]!.error.value = undefined
     if (pendingWhenIdle) {
       nuxtApp._asyncData[key]!.pending.value = false
     }
@@ -592,7 +592,7 @@ function createAsyncData<
   PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
   DefaultT = undefined,
 > (nuxtApp: NuxtApp, key: string, _handler: (ctx?: NuxtApp) => Promise<ResT>, options: AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>, initialCachedData?: NoInfer<DataT>): CreatedAsyncData<ResT, NuxtErrorDataT, DataT, DefaultT> {
-  nuxtApp.payload._errors[key] ??= asyncDataDefaults.errorValue
+  nuxtApp.payload._errors[key] ??= undefined
 
   const hasCustomGetCachedData = options.getCachedData !== getDefaultCachedData
 
@@ -610,7 +610,7 @@ function createAsyncData<
       }
 
   const _ref = options.deep ? ref : shallowRef
-  const hasCachedData = initialCachedData !== asyncDataDefaults.value
+  const hasCachedData = initialCachedData !== undefined
   const unsubRefreshAsyncData = nuxtApp.hook('app:data:refresh', async (keys) => {
     if (!keys || keys.includes(key)) {
       await asyncData.execute({ cause: 'refresh:hook' })
@@ -632,9 +632,9 @@ function createAsyncData<
       // Avoid fetching same key that is already fetched
       if (granularCachedData || opts.cause === 'initial' || nuxtApp.isHydrating) {
         const cachedData = 'cachedData' in opts ? opts.cachedData : options.getCachedData!(key, nuxtApp, { cause: opts.cause ?? 'refresh:manual' })
-        if (cachedData !== asyncDataDefaults.value) {
+        if (cachedData !== undefined) {
           nuxtApp.payload.data[key] = asyncData.data.value = cachedData as DataT
-          asyncData.error.value = asyncDataDefaults.errorValue
+          asyncData.error.value = undefined
           asyncData.status.value = 'success'
           return Promise.resolve(cachedData)
         }
@@ -675,7 +675,7 @@ function createAsyncData<
           nuxtApp.payload.data[key] = result
 
           asyncData.data.value = result
-          asyncData.error.value = asyncDataDefaults.errorValue
+          asyncData.error.value = undefined
           asyncData.status.value = 'success'
         })
         .catch((error: any) => {
@@ -724,7 +724,7 @@ function createAsyncData<
 }
 
 // Used to get default values
-const getDefault = () => asyncDataDefaults.value
+const getDefault = () => undefined
 const getDefaultCachedData: AsyncDataOptions<any>['getCachedData'] = (key, nuxtApp, ctx) => {
   if (nuxtApp.isHydrating) {
     return nuxtApp.payload.data[key]

packages/nuxt/src/core/templates.ts

@@ -571,7 +571,11 @@ export const nuxtConfigTemplate: NuxtTemplate = {
       `export const devRootDir = ${ctx.nuxt.options.dev ? JSON.stringify(ctx.nuxt.options.rootDir) : 'null'}`,
       `export const devLogs = ${JSON.stringify(ctx.nuxt.options.features.devLogs)}`,
       `export const nuxtLinkDefaults = ${JSON.stringify(ctx.nuxt.options.experimental.defaults.nuxtLink)}`,
-      `export const asyncDataDefaults = ${JSON.stringify(ctx.nuxt.options.experimental.defaults.useAsyncData)}`,
+      `export const asyncDataDefaults = ${JSON.stringify({
+        ...ctx.nuxt.options.experimental.defaults.useAsyncData,
+        errorValue: undefined,
+        value: undefined,
+      })}`,
       `export const fetchDefaults = ${JSON.stringify(fetchDefaults)}`,
       `export const vueAppRootContainer = ${ctx.nuxt.options.app.rootAttrs.id ? `'#${ctx.nuxt.options.app.rootAttrs.id}'` : `'body > ${ctx.nuxt.options.app.rootTag}'`}`,
       `export const viewTransition = ${ctx.nuxt.options.experimental.viewTransition}`,

test/fixtures/basic/pages/useAsyncData/immediate-remove-unmounted.vue

@@ -20,12 +20,9 @@
 </template>
 
 <script setup lang="ts">
-// @ts-expect-error virtual file
-import { asyncDataDefaults } from '#build/nuxt.config.mjs'
-
 const { data, execute } = await useAsyncData('immediateFalse', () => $fetch('/api/random'), { immediate: false })
 
-if (data.value !== asyncDataDefaults.value) {
-  throw new Error(`Initial data should be ${asyncDataDefaults.value}: ` + data.value)
+if (data.value !== undefined) {
+  throw new Error(`Initial data should be undefined: ` + data.value)
 }
 </script>

test/nuxt/composables.test.ts

@@ -26,9 +26,6 @@ import { useRouteAnnouncer } from '#app/composables/route-announcer'
 import { encodeURL, resolveRouteObject } from '#app/composables/router'
 import { useRuntimeHook } from '#app/composables/runtime-hook'
 
-// @ts-expect-error virtual file
-import { asyncDataDefaults } from '#build/nuxt.config.mjs'
-
 registerEndpoint('/api/test', defineEventHandler(event => ({
   method: event.method,
   headers: Object.fromEntries(event.headers.entries()),
@@ -350,7 +347,7 @@ describe('useAsyncData', () => {
 
     await flushPromises()
 
-    expect(res.data.value).toBe(asyncDataDefaults.value)
+    expect(res.data.value).toBe(undefined)
     expect(res.status.value).toBe('idle')
     expect(res.pending.value).toBe(false)
 
@@ -361,7 +358,7 @@ describe('useAsyncData', () => {
       }, { lazy: true },
     )
 
-    expect(res2.data.value).toBe(asyncDataDefaults.value)
+    expect(res2.data.value).toBe(undefined)
     expect(res2.status.value).toBe('pending')
     expect(res2.pending.value).toBe(true)
 
@@ -597,7 +594,7 @@ describe('useAsyncData', () => {
     expect(useNuxtData(firstKey).data.value).toBeUndefined()
     expect(useNuxtData(secondKey).data.value).toBe(secondKey)
 
-    expect(useNuxtApp()._asyncData[firstKey]!.data.value).toBe(asyncDataDefaults.value)
+    expect(useNuxtApp()._asyncData[firstKey]!.data.value).toBe(undefined)
     expect(useNuxtApp()._asyncData[secondKey]!.data.value).toBe(secondKey)
 
     comp.unmount()