Skip to content

HTML comment inside JS expression in template causes crashΒ #1046

@nolanlawson

Description

@nolanlawson

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    - P3: minor bugAn edge case that only affects very specific usage (priority)needs triageIssue needs to be triaged

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions