🐛 BUG: Comments parsing inside JSX #956
Description
Describe the Bug
First of all, I am not sure if this issue belong to the language-tools, the compiler or the astro repository. So sorry if I picked the wrong repo.
System info
Astro v4.2.6
Node v18.17.1
System Linux (x64)
Package Manager npm
Output static
Adapter none
Integrations none
I have the same issue using Node v21.5.0.
The issue
I can write comments inside JSX like this:
{/* This comment is working */}
<Card
href="https://docs.astro.build/"
title="Documentation"
body="Learn how Astro works and explore the official API docs."
/>However, if I want to use a comment between the props, it does not work:
<Card
href="https://astro.build/integrations/"
{/* This one does not work */}
title="Integrations"
body="Supercharge your project with new frameworks and libraries."
/>On the same line, it does not work neither:
<Card
href="https://astro.build/integrations/"
title="Integrations" {/* This one does not work neither */}
body="Supercharge your project with new frameworks and libraries."
/>With these examples, I got Unterminated string literal. ts(1002).
If I try to put a comment in a ternary like this:
{
showThemes ? (
<Card
href="https://astro.build/themes/"
title="Themes"
// This one does not work neither.
body="Explore a galaxy of community-built starter themes."
/>
) : null
}Then I see:
Type '{ href: string; title: string; This: true; is: true; a: true; comment: true; body: string; }' is not assignable to type 'IntrinsicAttributes & Props'.
Property 'This' does not exist on type 'IntrinsicAttributes & Props'.ts(2322)
The same error happens if I use the following format: /* This is a comment */.
In another project using ESlint, it is not Typescript who is complaining but ESlint:
Parsing error: Unknown token at 782, expected: "*", actual: "/* eslint-"eslint
And Prettier does not work neither, it complains with SyntaxError: Unexpected token.
My expectations
I expect to be able to use comments this way since this pattern is commonly used to disable a linter like ESlint:
{ data ? (
<Card
href="https://astro.build/chat/"
title="Community"
body="Come say hi to our amazing Discord community. ❤️"
/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */
slot={data ? 'data' : undefined}
/>
) : null
}Steps to Reproduce
I created a project in Stackblitz ( https://stackblitz.com/edit/astro-comments-parsing-bug?file=src%2Fpages%2Findex.astro ) but the parser does not work (I have a warning in the console No parser for file type: astro) so you can download it and open the project in VS Code or you can follow the instructions below.
npm create astro@latest -- --template basics- Choose a path to install then answer
Yesfor all (and keepStrictfor Typescript) - Open VS Code, and install Astro VS Code Extension if needed.
- Update the content of
./src/pages/index.astrowith:
---
import Layout from "../layouts/Layout.astro";
import Card from "../components/Card.astro";
---
<Layout title="Welcome to Astro.">
<main>
<Card
href="https://astro.build/integrations/"
{/* This comment does not work */}
title="Integrations"
body="Supercharge your project with new frameworks and libraries."
/>
</main>
</Layout>
<style>
main {
margin: auto;
padding: 1rem;
width: 800px;
max-width: calc(100% - 2rem);
color: white;
font-size: 20px;
line-height: 1.6;
}
</style>- Then we got parsing errors.