React Developer Tools doesn't work on first render

[ruigouveiamaciel]

Issue description

Whenever you try to render a page for the first time (in development mode), the React Developer Tools will timeout and error.

Other behaviors

1. Some components, for some odd reason, never timeout and actually work, such as the Logo component. However, in the /examples/ssr-spa, the Link component seems to always timeout of the first render.

2. Sometimes React Developer Tools will straight up just refuse to even load the DOM

   

3. Because this example is using client routing, whenever you switch to another page and then page to the same page React Developer Tools will not timeout anymore and work as expected.

   Screencast.from.03-10-2023.11.38.08.webm

Fix suggestion

I believe the root of the issue is because the first render is handled by onRenderHtml, which handles the creation of the page. The client, on the first render, only hydrates the page and therefore is lacking some information required by React Developer Tools.

After the first render, client routing takes control and therefore there's no longer the issue of the client missing any information required by the React Developer Tools.

I found out that by adding '$$typeof' to passToClient fixes this issue.

// /vike-react/renderer/+config.ts

export default {
  // ...
  passToClient: ['pageProps', 'title', '$$typeof']
  // ...
} satisfies Config

I was going to make a pull request for this, however this seems like a very small change and I don't know if it's the best approach to fixing it.

It would also be useful to extend the documentation with this information for people that are trying to build their own renderers/frameworks.

If you're happy with my proposed fix, I could go ahead and create a pull request for both the issue and the documentation. However I don't know what's the most appropriate place to document this.

[lourot]

Hey @ruigouveiamaciel, thank you so much for digging into it. Adding $$typeof with a comment sounds good to me. Do you have a link to React's documentation or source-code or else describing this?

The documentation of Vike's V1 design is in construction, as well as the documentation of vike-{react,vue,solid}. The idea is that we want to document things which are common to all three vike-* at vike.dev, e.g. https://vike.dev/vike-packages and https://vike.dev/usePageContext.

And we want the documentation specific to vike-react to live in this repo. Feel free to give a shot at writing some documentation and we'll maybe just move it at some point. Thanks!

[ruigouveiamaciel]

Hey @AurelienLourot, $$typeof is a property that exists in all react components and it's used for many things, including determining what component the element is.

About 4 years ago I recall having a similar issue with the React Developer Tools and it was because the framework I was using at the time was not preserving $$typeof for some reason. I don't recall what framework I was using nor how I found the fix for it.

I also noticed that the issue mostly only happens to the <Page /> component and its children. React Developer Tools seems to always work with the parents of <Page /> on my company's websites so I just had the idea of adding $$typeof to passToClient and it worked!

If you want to read more about $$typeof I can link you the original pull request for it.

[lourot]

Thanks and I can reproduce the issue by the way. PRs welcome!

[brillout]

@AurelienLourot I didn't read the whole thread, is there something actionable or can we close this?

[lourot]

@brillout we can just add '$$typeof' to passToClient in order to support the React Developer Tools. What do you think?

[brillout]

Hm, that's surprising: seems like React (or more likely its dev tool) is touching the pageContext object.

1. Some components, for some odd reason, never timeout and actually work, such as the Logo component. However, in the /examples/ssr-spa, the Link component seems to always timeout of the first render.

Makes me think that $$typeof is being added when vike-react adds pageContext to the React context for usePageContext(). (<Link> calls usePageContext().)

I guess we can add it to passToClient if the value of $$typeof is small.

How about this: we add it to passToClient and add an assert(!pageContext.$$typeof || typeof pageContext.$$typeof ==='string' && pageContext.$$typeof.length < 100)? (Assuming it's a string.)

[lourot]

pageContext.$$typeof.length < 100

Does this matter? Users who haven't installed the React Developer Tools won't be affected anyways and for the users having it installed, I guess it's fine if that means more data usage?

[brillout]

Are we sure it's only set for users who installed the dev tool browser extension? How about users who installed it but don't open the browser dev tool?

[ruigouveiamaciel]

I think $$typeof is part of the React documentation for the component class. Also the $$type is only needed during development, they could be a check to disable it after vite build

[ruigouveiamaciel]

I found this https://medium.com/@fengyu214/learning-react-source-code-ecfee15f875f

[brillout]

only needed during development

Neat, I've written a fix based on that assumption. It's released in 0.4.1. Let me know if you still get any issue.

Apologies for the late handling of that issue. We'll be quicker now that I believe vike-react to be stable.

In case I didn't ask before: would your company be up for sponsoring?