HTML comment inside JS expression in template causes crash

nolanlawson commented 1 year ago

Astro Info

Astro                    v3.2.0
Node                     v18.18.0
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Using an HTML comment inside of a JS expression inside of a template:

{
  title && 
  <!-- comment -->
  (<span>{title}</span>)
}

...causes a crash for both astro dev and astro build:

 error   __vite_ssr_import_0__.render(...) is not a function
  File:
    /home/projects/github-kgdcfp/anonymous/$$Card<@/home/projects/github-kgdcfp/src/components/Card.astro:13:294
  Stacktrace:
anonymous/$$Card<@/home/projects/github-kgdcfp/src/components/Card.astro:13:294
fn@/home/projects/github-kgdcfp/node_modules/astro/dist/runtime/server/astro-component.js:21:12
init@/home/projects/github-kgdcfp/node_modules/astro/dist/runtime/server/render/astro/instance.js:32:29
render@/home/projects/github-kgdcfp/node_modules/astro/dist/runtime/server/render/astro/instance.js:37:18
render@/home/projects/github-kgdcfp/node_modules/astro/dist/runtime/server/render/component.js:334:22
renderChild@/home/projects/github-kgdcfp/node_modules/astro/dist/runtime/server/render/any.js:36:17

In VS Code at least, there's no indication of a syntax error, so this can be tricky to debug.

Screenshot from 2023-10-01 09-48-57

What's the expected result?

Ideally it would "just work" (it seems like a common thing to do when writing Astro templates), or it would provide a more helpful error message rather than a crash.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-kgdcfp?file=src%2Fcomponents%2FCard.astro

Participation

[ ] I am willing to submit a pull request for this issue.

bluwy commented 1 year ago

While HTML comments work in JS historically for compat, the JS expression block should technically contain only JS and comments would be /* comment */ instead. So I'm not sure if this should work.

nolanlawson commented 1 year ago

I'm not sure either, but I'm just pointing out it's not a great user experience to 1) have the dev server crash entirely, with 2) no clear error message and no syntax highlighting indicating the error.

Harshvar25 commented 1 year ago

can I be assigned for this

bluwy commented 11 months ago

Update: the error message is still the same (and confusing), but syntax highlighting now has a small hint of the error:

withastro / compiler