[Bug]: Defer + single resolved promise causes "Deferred data aborted" error in dev tools

[jklosinski]

What version of React Router are you using?

6.4.0

Steps to Reproduce

I modified the Deferred example app: https://stackblitz.com/edit/github-roj5bp?file=src/routes.tsx

1. Open sample above
2. Open dev tools
3. Click on Deferred 2
4. Click on Home
5. In dev tools, you should get a "Deferred data aborted" error even though the object passed to defer contains only a single resolved promise

Is this behavior expected? I can't find any info about it on the web.

Expected Behavior

The object passed to defer has just one resolved value:

export async function deferredLoader2() {
  return defer({
    critical1: await resolve("Critical 1", 250),
  });
}

So I would expect that there should not be any errors around deferred data being aborted.

Actual Behavior

The error is thrown. One thing to note, is that if you click on the Deferred link (which is unmodified from the example app) and let it load, the error does not occur.

[mikiyasET]

I'm having same issue

Loader

export const DashboardLoader = async () => {
    return defer({
        users: await Service.Run().UserService.getAllUsers()
    });
}

calling it

const loaderData:any = useLoaderData();

 return (<Suspense fallback={<div>Loading...</div>}>
        <Await resolve={loaderData.users} errorElement={<div>Error</div>}>
            {(data) =>
                <p></p>
            }
        </Await>
    </Suspense>

and there is a error on the log

[seanmcquaid]

Seeing the same issue as well!

[brophdawg11]

I'll look into detecting this, but this isn't really a valid use case for defer() since you're not actually deferring anything. defer() expects at least one Promise as a value in the object passed to defer. If everything is await'd then you can just use json().

[seanmcquaid]

@brophdawg11 - What about cases where you'd want to conditionally await? For example, when you either want to grab data from a cache or fetch if there is nothing in the cache.

[brophdawg11]

That would be a valid use case, but it's not the use case described in this issue 😜. The linked PR will get rid of the console error 👍

[seanmcquaid]

Aw man, my bad! You're totally right. Appreciate the work you're doing!

[github-actions]

🤖 Hello there,

We just published version 6.7.1-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 6.8.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[mikiyasET]

I'm having same issue

Loader

export const DashboardLoader = async () => {
    return defer({
        users: await Service.Run().UserService.getAllUsers()
    });
}

calling it

const loaderData:any = useLoaderData();

 return (<Suspense fallback={<div>Loading...</div>}>
        <Await resolve={loaderData.users} errorElement={<div>Error</div>}>
            {(data) =>
                <p></p>
            }
        </Await>
    </Suspense>

and there is a error on the log

This is fixed with the new update, Thanks and we all appreciate the work you guys are doing...