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
SyntaxError: Expected corresponding JSX closing tag #1691
Comments
i also tried other examples and all have the same error .... |
today i used the example below to add typescript support and all and it worked. https://codesandbox.io/s/9pucf If you delete the yarn.lock though and rerun the yarn install it will again break. |
same problem |
Thank you. I will try that |
any update? |
Same issue |
couldn't find what caused it. |
Same issue here. <Playground>
{() => {
const foo = 'bar'
return <div />
}}
</Playground> <Playground>
{() => {
const foo = 'bar'
return <div></div>
}}
</Playground> <Playground>
<div />
</Playground> <Playground>
<div></div>
</Playground> I have the same behavior when I use with/without a function body. It is working just with auto-closing tags. My env: |
Same issue here. For me it seems to be cutting out the first ending tag, so
becomes
|
After investigation, it seems that forcing (through yarn resolution or whatever) the downgrade of the package It might be related to this issue babel/babel#14139 and this update babel/babel#14105 |
Hi! Babel maintainer here. I'd be happy to help figure out if this is a Babel bug, or if it's a bug somewhere else that was hidden in this specific circumstance and unveiled by that Babel update. Does docz use any custom Babel plugin to transform |
Hello @nicolo-ribaudo 👋 , I've mentioned the babel/babel#14105 since the issue starts to appear from
I'm not an active Docz maintainer but from what I see, It seems:
Maybe the maintainers @pedronauck / @renatobenks can confirm. |
After a very long debug session (it took a few hours because I was not familiar with the project 😬), I came to the conclusion that:
What is the fixed Babel bug exactly? Babel has a few utility methods to control how the AST is traversed. One of them if However, in some circumstances it only prevented part of the remaining nodes from being traversed, rather than all of them. We fixed this bug, and now What is the docz bug? docz has some code to remove the <Playground>
<Alert>Some text here</Alert>
</Playground> into <Alert>Some text here</Alert> This is the utility function that should do that transformation: docz/core/docz-utils/src/jsx.ts Lines 13 to 18 in 259898c
For completeness, here is the docz/core/docz-utils/src/ast.ts Lines 7 to 28 in 259898c
In our example above, both
Calling (It might help looking at the AST for my example, remembering that Babel traverses nodes in "source code order": when it comes to JSX, it first traverses the opening tag, then the children and then the closing tag.) After getting We were "lucky" before because My suggested fix Rather than finding an opening and a closing tag separately, I suggest getting them at the same time. Also, the current <Playground>
This is followed by a comment! { /* </Playground> */ }
<Alert>Some text here</Alert>
</Playground> because by replacing This is followed by a comment! { /* */ }
<Alert>Some text here</Alert>
</Playground> I suggest to rewrite const getTagContentsRange = valueFromTraverse(
p => p.isJSXElement(),
({ node }) => {
if (!node.closingElement) {
// if the JSX element doesn't have a closingElement, it's because it's self-closed
// and thus does not have any content: <Playground />
return [0, 0];
}
return [node.openingElement.end, node.closingElement.start];
}
);
export const removeTags = (code: string) => {
const [start, end] = getTagContentsRange(code);
return code.slice(start, end);
}; by doing so we get the start/end location of the contents of the first JSX tag, which should be safe. |
I ended up creating a PR with the above fix - #1696 |
great work @nicolo-ribaudo, we're going to merge and release it as soon as we can |
The previous version contained a broken `Playground`. It has shown the error: Expected corresponding JSX closing tag for <Accordion> Issue describing the bug: doczjs/docz#1691
Getting
SyntaxError: Expected corresponding JSX closing tag
error when using any component with children inside thePlayground
component.Using components that self close, for example
<MyComponent />
works fine.Here is a sample with the error. Please click on Components > Alert on the left menu.
https://codesandbox.io/s/docz-example-xj522
Thanks
The text was updated successfully, but these errors were encountered: