defer never resolving when hydration errors are present #5165
Description
What version of Remix are you using?
1.11.0
Steps to Reproduce
This simple page causes the issue to occur on my end:
import { defer } from '@remix-run/node'
import { Await, useLoaderData } from '@remix-run/react'
import { Suspense } from 'react'
export const loader = async () => {
const longRunningPromise = new Promise((resolve) => {
setTimeout(
() =>
resolve({
result: 42
}),
2000
)
})
return defer({
fastData: "I'm already here",
longRunningPromise
})
}
export default function Page() {
const data = useLoaderData()
return (
<div>
Available on first render: {data.fastData}
<Suspense fallback={<p>Slow...</p>}>
<Await resolve={data.longRunningPromise} errorElement={<div>Something went wrong</div>}>
{(longRunningPromise) => <div>Answer: {longRunningPromise.result}</div>}
</Await>
</Suspense>
</div>
)
}
Refreshing the page will sometimes work, and sometimes the loading state will stay forever.
This appears to be linked to browser extensions and hydration, as the error disappears entirely when running the test in an incognito window.
Expected Behavior
After about 2 seconds, I would expect the long running promise in the above example to resolve and be displayed on the page.
Actual Behavior
The promise is only resolved sometimes.
When the promise is not resolved, the console shows a client side hydration error.
I've seen this hydration many times in the past, and it appears to be related to my browser extensions (namely React Devtools): https://remix.run/docs/en/v1/pages/gotchas#browser-extensions-injecting-code
So the hydration error is not new, but whenever I see it, the promise ends up never resolving.
Below is a video showing the problem in a fresh install of Remix (the "Indie stack"):
Screen.Recording.2023-01-20.at.16.55.44.mov
Note: This may be related to: #5153
But I don't think this is specific to Prisma.