withastro
🐛 BUG: Invalid markup generates a runtime error
What version of astro are you using?
0.25.4
What package manager are you using?
yarn
What operating system are you using?
Windows
Describe the Bug
I am seeing an error attempting to render a very simple template. Support thread here: https://discord.com/channels/830184174198718474/958787462606495804
Minimal example linked below.
<!-- this works -->
{Object.keys(importedAuthors).map(author => <p>
<div>hello</div>
</p>)}
<!-- this does not work -->
{Object.keys(importedAuthors).map(author => <p>
<div>{author}</div>
</p>)}
Link to Minimal Reproducible Example
https://stackblitz.com/edit/github-rztbls?file=src/pages/index.astro
Participation
- [ ] I am willing to submit a pull request for this issue.
@godefroi I was able to get your example working by wrapping the return value in a fragment instead of a <p>. Not sure why that works but a <p> doesn't.
I was able to get the non-working example to work by changing the <div> to a <span>. W3 considers a <div> element inside of a <p> element as invalid HTML. I wonder if that's why it's failing to compile in Astro.
Looks like if the markup requires interpolation is invalid, the compiler fails. Seems that maybe static markup doesn't have the same compiler steps (validation step?) as dynamic markup.
Nice sleuthing, @ryanfitzer! I took a stab at this one and I'm struggling to untangle where this is going wrong, but it looks like you're correct that mixing invalid HTML with expressions is the culprit.
Somehow the trailing ) in the expression is getting dropped before we generate the JS for the Astro component, so where we should be printing )} we're instead printing }. That's the cause of that error message.
I'll keep working to track down a fix!
