Remix and Apollo Client Devtools throw errors

[SteaceP]

Have you experienced this bug with the latest version of the template?

Yes

Steps to Reproduce

Have Apollo Client Devtools installed on any of those browsers: Chrome, Edge, Firefox (all latest version as of today). With the Remix stack of course ...

Expected Behavior

No errors and SSR.

Actual Behavior

Seems to load entry.server.ts then fall back to entry.client.ts and you get all those errors in the browser console:

• Error: Promised response from onMessage listener went out of scope
• Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server
• Error: Hydration failed because the initial UI does not match what was rendered on the server.
• Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

Deactivating the extension remove all the errors and SSR work

p.s. It happens on the 2 other stacks too. And sorry if the bug is actually from the Apollo devtool

[mcansh]

looks like Apollo Devtools is modifying the DOM so React is throwing due to the difference between the server render and the client being hydrated.

[github-actions]

This issue has been automatically marked stale because we haven't received a response from the original author in a while 🙈. This automation helps keep the issue tracker clean from issues that are not actionable. Please reach out if you have more information for us or you think this issue shouldn't be closed! 🙂 If you don't do so within 7 days, this issue will be automatically closed.

[github-actions]

This issue has been automatically closed because we didn't hear anything from the original author after the previous notice.