compiler icon indicating copy to clipboard operation
compiler copied to clipboard

HTML comment inside JS expression in template causes crash

Open nolanlawson opened this issue 2 years ago • 4 comments

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.

nolanlawson avatar Oct 01 '23 16:10 nolanlawson

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.

bluwy avatar Oct 02 '23 03:10 bluwy

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.

nolanlawson avatar Oct 04 '23 14:10 nolanlawson

can I be assigned for this

Harshvar25 avatar Oct 04 '23 19:10 Harshvar25

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

bluwy avatar Dec 26 '23 14:12 bluwy