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] prop-types removal alternative / console component trace #28992
Comments
React is missing a public API for logging component stack trace. const getStackTrace = () => {
let stack = '';
const ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
if (ReactSharedInternals != null) {
const ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
const stackAddendum = ReactDebugCurrentFrame.getStackAddendum();
if (stackAddendum !== '') {
stack = stackAddendum;
}
}
return stack;
} The problems with this solution:
Does the React team consider adding public API for this? Alternatively, we can create a community package that would encapsulate the internal API access and provide a cross-version method for getting the stack trace. |
There are two separate issues here: PropTypes deprecation, and component stacks for console.error. The PropTypes concerns are understandable, but we're not adding support back to them. The blog posts are separate because one announces the features in 19, and the other the breaking/notable changes:
The component stack changes seem concerning, they seem to work for me in the CodeSandbox you linked: |
@rickhanlonii It doesn't work when opening the codesandbox link standalone. It doesn't work on Vite either. I haven't tested Next.js but I don't recall seeing it work their either. |
Doesn't work in Next.js neither for me. I suppose normally the react devtools extension should kick in? |
Correct! I mentioned the component stacks in this issue because we need them for props validation errors that would replace propTypes for us. |
Summary
The state of
.propTypes
is a bit unclear. I see:But it looks inaccurate, I would expect it says that
React.PropTypes
were deprecated from the source linked.Source
https://github.com/mui/material-ui/blob/2827bacf567fc95ef147d543316ffe688896db90/packages/mui-material/src/Autocomplete/Autocomplete.js#L985-L990
So to replace this, it seems that the closest alternative is to do something like this:
Unfortunately, it's missing the component trace.
Before: https://codesandbox.io/p/sandbox/mystifying-mcclintock-mf7r5m?file=%2Fsrc%2FDemo.js%3A16%2C1
After: https://codesandbox.io/p/sandbox/agitated-orla-8kj8rh?file=%2Fsrc%2Findex.js
It seems much harder to figure out where console logs come from. So while https://react.dev/blog/2024/04/25/react-19#diffs-for-hydration-errors is a great step forward, this one feels like a step backward. Is there an alternative to it?
There is a function in https://github.com/facebook/prop-types/blob/1c9c6311c1fb8778bffc7a1ca70c273ee8a8654d/checkPropTypes.js#L20 but it doesn't log the component trace either.
The text was updated successfully, but these errors were encountered: