Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React Developer Tools doesn't work on first render #25

Closed
ruigouveiamaciel opened this issue Oct 3, 2023 · 13 comments
Closed

React Developer Tools doesn't work on first render #25

ruigouveiamaciel opened this issue Oct 3, 2023 · 13 comments
Labels
bug 💥 Something isn't working

Comments

@ruigouveiamaciel
Copy link

Issue description

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

Screenshot from 2023-10-03 11-16-24

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

    image

  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
Copy link
Contributor

lourot commented Oct 3, 2023

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
Copy link
Author

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
Copy link
Contributor

lourot commented Oct 3, 2023

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

@brillout brillout added bug 💥 Something isn't working and removed bug 💥 Something isn't working labels Dec 6, 2023
@brillout
Copy link
Member

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

@lourot
Copy link
Contributor

lourot commented Jan 21, 2024

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

@brillout
Copy link
Member

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
Copy link
Contributor

lourot commented Jan 21, 2024

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
Copy link
Member

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
Copy link
Author

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
Copy link
Author

@brillout
Copy link
Member

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?

@brillout brillout added the bug 💥 Something isn't working label Jan 21, 2024
@ruigouveiamaciel
Copy link
Author

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

Sadly I had to move away from my company because the CEO became a hype man/finance bro and ruined everything. Classic startup moment. They also trashed all of the Vite code I had written just because it was me that had written it, so they don't even use Vite anymore.

On my new job we're not using Vite so no luck there either.

@brillout
Copy link
Member

I see. Thanks for the conversation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 💥 Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants