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 19] Fiber is missing a debug information #29092

Closed
scirill opened this issue May 16, 2024 · 6 comments
Closed

[React 19] Fiber is missing a debug information #29092

scirill opened this issue May 16, 2024 · 6 comments
Labels

Comments

@scirill
Copy link

scirill commented May 16, 2024

Summary

In React 18, Fiber exposed _debugSource

updateQueue null

In React 19 (19.0.0-rc-915b914b3a-20240515) this was changed to _debugInfo but the value is alway null

updateQueue null
@scirill
Copy link
Author

scirill commented May 16, 2024

@sebmarkbage Hi, I see you made the changes in the related code. You mentioned in the commit that the change is only for the server rendering, but now any debug information is missing for the client rendering components.
Thanks

@kblauhut
Copy link

This seems to have been removed with #29092

@rickhanlonii
Copy link
Member

This was removed in #28265, see that PR for the reasoning.

The internal fiber structure is internal and will break between any release.

@rickhanlonii rickhanlonii closed this as not planned Won't fix, can't repro, duplicate, stale May 19, 2024
@scirill
Copy link
Author

scirill commented May 19, 2024

@rickhanlonii thank you for your answer, I understand the Fiber structure can be changed, but this change also broke the way DevTools displays the source. The lazy approach getting the source returns different information.

Before this change, the source in DevTools pointed to the place that used the Component in the project source file.

Now it will point to the place that defines the component in the compiled output of the build tool.

For example, before, if I had this code:

src/Hello.tsx

1: function Hello() {

2:    return <Typography>Some text</Typography>

3: }

The source for Typography pointed to {fileName: "src/Hello.tsx", lineNumber: 2}

But now the DevTools point the source to one of the runtime chunk files of the build tool (I'm using Vite so it shows like this chunk-OITURYR5.js?v=29ba3b73:1389) And this information is absolutely pointless for the user for debug purposes.
Because of this change #28351 , DevTools 5.2 version is now showing the wrong source even for React 18,
Should I open a new issue for this?
Thank you

@rickhanlonii
Copy link
Member

The change to the source is expected I think, but breaking 18 isn't. Yeah please file a issue specific for that cc @hoxyq

@hoxyq
Copy link
Contributor

hoxyq commented May 20, 2024

DevTools 5.2 version is now showing the wrong source even for React 18

For the past few weeks I've heard from many people the same feedback on the source location stuff, that people actually want to see the JSX part and not the actual component declaration, which totally makes sense to me. We would need to change the UI in DevTools for it though, because we have different features relying on the same source information. I will follow-up in #29164.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants