🐛 BUG: Invalid markup generates a runtime error

[godefroi]

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.

[tony-sull]

@natemoo-re any chance this one's hitting a corner case in the compiler?

[ryanfitzer]

@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.

[donovanchilders]

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.

[ryanfitzer]

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.

[natemoo-re]

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!

[natemoo-re]

Related to #432

[MoustaphaDev]

I forgot to close this somehow, should've been closed by #921