compiler
compiler copied to clipboard
Published
20 hours ago •
withastro
withastro
JSX Comment causing <body> to render no class/attributes
Astro Info
Astro v4.2.1
Node v20.10.0
System macOS (arm64)
Package Manager pnpm
Output static
Adapter none
Integrations @astrojs/tailwind
If this issue only occurs in one browser, which browser is a problem?
Firefox, Safari
Describe the Bug
This code will Render perfectly without the JSX comment on a .astro
---
const title = "astro"
---
{/* This comment will cause a bug */}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>{title}</title>
</head>
<body class="text-red-500">
<p>Astro</p>
</body>
</html>
<style>
.text-red-500 {
color: red;
}
</style>
When a comment (JSX comment) is present after the Component Script and before the start of any html tag, when rendered in dev and preview mode. For
its class attribute and anything in side it will be removed. But if{title} is removed and <title>Astro</title> is in its place this will render properly. Short hand attributes like <meta {charset} /> will work perfectly.
A solution I found was just to use a simple html comment, or use a JSX comment and wrap the title in a Fragment:
<Fragment set:html={`<title>${title}</title>` />
What's the expected result?
This is how it should be rendered regardless of a JSX comment position:
<body class="text-red-500">
Not:
<body>
Link to Minimal Reproducible Example
https://stackblitz.com/edit/github-zmz8ku?file=src%2Fpages%2Findex.astro
Participation
- [ ] I am willing to submit a pull request for this issue.
