Svelte choking on JavaScript Comment Blocks with Example Usage

[redesigned]

Describe the bug

Version: svelte 5.43.14

Unterminated comment
https://svelte.dev/e/js_parse_error

Reproduction

Both in VSCode and pnpx sv check

Example of Comment:

	/**
	 * ## Component: AutoHideHeader ##
	 * Auto-hiding header that slides up when scrolling down and reappears when scrolling up.
	 * Perfect for maximizing content space while keeping navigation accessible.
	 *
	 * Behavior:
	 * - Hides when scrolling DOWN (slides up)
	 * - Shows when scrolling UP or at top of page
	 * - Always visible when at top of page (within threshold)
	 *
	 * CSS Variables set by component (can be overridden):
	 * - --autohide-header-height: Auto-calculated height in pixels
	 * - --autohide-header-transition: Transition duration (default: 0.3s)
	 * - --autohide-header-z-index: Z-index value (default: 999)
	 *
	 * Classes applied for styling hooks:
	 * - .autohide-header: Base class
	 * - .autohide-visible: When header is visible
	 * - .autohide-hidden: When header is hidden
	 * - .autohide-scrolled: When user has scrolled past threshold
	 *
	 * Example Usage:
	 *
	 * ```svelte
	 * <script>
	 *   import { AutoHideHeader } from '$lib/components'
	 *   let headerVisible = $state(true)
	 *   let hasScrolled = $state(false)
	 * </script>
	 *
	 * <!-- Simple usage -->
	 * <AutoHideHeader>
	 *   <nav>Logo | Links | Menu</nav>
	 * </AutoHideHeader>
	 *
	 * <!-- Advanced with state binding -->
	 * <AutoHideHeader
	 *   bind:isVisible={headerVisible}
	 *   bind:isScrolled={hasScrolled}
	 *   threshold="100px"
	 *   scrollChangeThreshold={20}
	 * >
	 *   <nav class:slim={hasScrolled}>
	 *     <!-- Header gets slimmer when scrolled -->
	 *   </nav>
	 * </AutoHideHeader>
	 *
	 * <style>
	 *   nav {
	 *     height: 80px;
	 *     transition: height 0.3s;
	 *   }
	 *   nav.slim {
	 *     height: 60px;
	 *   }
	 * </style>
	 * ```
	 */

the_comment.txt

Converting to all single line comments does not fix the issue even.

Logs

/src/components/AutoHideHeader.svelte:5:2
Error: Unterminated comment
https://svelte.dev/e/js_parse_error (svelte)
        /* ## Component: AutoHideHeader ## */
        /**
         * Auto-hiding header that slides up when scrolling down and reappears when scrolling up.

/src/components/AutoHideHeader.svelte:53:15
Error: { expected (css)
         *   nav {
         *     height: 80px;
         *     transition: height 0.3s;

/src/components/AutoHideHeader.svelte:54:19
Error: { expected (css)
         *     height: 80px;
         *     transition: height 0.3s;
         *   }

/src/components/AutoHideHeader.svelte:55:7
Error: { expected (css)
         *     transition: height 0.3s;
         *   }
         *   nav.slim {

/src/components/AutoHideHeader.svelte:57:15
Error: { expected (css)
         *   nav.slim {
         *     height: 60px;
         *   }

/src/components/AutoHideHeader.svelte:58:7
Error: { expected (css)
         *     height: 60px;
         *   }
         * </style>

/src/components/AutoHideHeader.svelte:59:5
Error: { expected (css)
         *   }
         * </style>
         * 

/src/components/AutoHideHeader.svelte:42:3
Error: Attributes need to be unique
https://svelte.dev/e/attribute_duplicate (ts)
         *   bind:isVisible={headerVisible}
         *   bind:isScrolled={hasScrolled}
         *   threshold="100px"

System Info

Version: svelte 5.43.14

  System:
    OS: macOS 26.0.1
    CPU: (8) arm64 Apple M2
    Memory: 77.81 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 25.2.1 - /Users/joshuajarman/.asdf/installs/nodejs/25.2.1/bin/node
    npm: 11.6.2 - /Users/joshuajarman/.asdf/plugins/nodejs/shims/npm
    pnpm: 10.23.0 - /Users/joshuajarman/.asdf/installs/pnpm/10.23.0/bin/pnpm
    Deno: 2.5.6 - /opt/homebrew/bin/deno
  Browsers:
    Chrome: 142.0.7444.176
    Edge: 142.0.3595.90
    Firefox Developer Edition: 145.0
    Safari: 26.0.1
  npmPackages:
    svelte: ^5.43.14 => 5.43.14

Severity

annoyance

[7nik]

This is can'tifx.

   *   import { AutoHideHeader } from '$lib/components'
   *   let headerVisible = $state(true)
   *   let hasScrolled = $state(false)
   * </script>

This causes the script to "end" on the last line in the quote. Thus you get the Unterminated comment error, and the next lines are treated as component markup with obviously invalid styles and other problems.

The parser follows HTML's specs, where a script ends right on the string </script> and no matter what is before it.

But it would be nice if compiler/svelte-check would warn about extra </script>.

[redesigned]

I didn't realize this was a limitation of the HTML Parser with embedded <script> tags, crazy.
I was wondering why it works fine in .ts and .js files but not .svelte files, different parser.

If I am understanding correctly I can move the comment out of the script tag into an html comment, or somehow escape the closing script tags within the comment?

Verified: that escaping or otherwise breaking that closing script tag resolves the issue.
Even adding a space < /script> fixes the HTML Parser misreading the comment.

Learn something new every day.
Thank you for the additional information.
Much Appreciated.