fix(renderer): omitting internal symbol from mdx props #10813
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I've noticed that when using the following code in an mdx file with a content collection, everything works fine if I have a properly compiling page
But if there's an error anywhere in the codebase after a react dependency is being used, let's say
we're greeted with an error that makes no sense
But if the error happens earlier in the code like
then we get the expected error
Here's a minimal reproducible example: https://codesandbox.io/p/devbox/magical-hoover-phk2cv?file=%2Fastro.config.mjs%3A9%2C2
After some digging, I found that the problem happens because the symbol
gets passed down to the user's component.
The weird error messages even go away if we manage to get rid of that symbol in the mdx outside the compiler before the react component is rendered, like:
While trying to unknowningly recreate the above example using an old astro version before v4.5.9, I realized that all react mdx components used to have this issue even without
{...props}
being spread.After updating astro to latest, I traced this problem getting partially fixed with this commit 627e47d.
I'm guessing it has something to do with
Skip.symbol
always being passed in, but the new symbol is also always being passed in. I guess I'm not familiar enough with the astro compiler internals to know why that was always erroring and the above commit made it only break when props is spread. Oh well.Here's the same problem happening with v4.5.8 without any props getting passed to the component in the mdx file in case you're curious https://codesandbox.io/p/devbox/compassionate-hypatia-glvdg5?file=%2Fastro.config.mjs
Changes
I'm not 100% sure what part of the process
vnode.type()
exactly represents. Omitting the symbol here seems to magically solve the problem, but I can't really explain why a symbol being passed to a component would cause React to be null. Since this is a build error, I can't compare bundle outputs either to see what exactly is being changed either.Since this function continues to recurse with the value of
vnode.props
, I had to spread the symbol out of it instead of mutating.Testing
I added a regression test for the user-facing part of the problem which is that error messages get messed up during build errors. I don't think it would be valuable to check for any specific symbol in the mdx here
Docs
Shouldn't need a documentation change for a bug fix