Skip to content

🐛 Svelte parsing error in <script> tag with generics attribute #9709

@leetdavid

Description

@leetdavid

Environment information

Details
CLI:
  Version:                      2.4.8
  Color support:                true

Platform:
  CPU Architecture:             aarch64
  OS:                           macos

Environment:
  BIOME_LOG_PATH:                    unset
  BIOME_LOG_PREFIX_NAME:             unset
  BIOME_LOG_LEVEL:                   unset
  BIOME_LOG_KIND:                    unset
  BIOME_CONFIG_PATH:                 unset
  BIOME_THREADS:                     unset
  BIOME_WATCHER_KIND:                unset
  BIOME_WATCHER_POLLING_INTERVAL:    unset
  NO_COLOR:                     unset
  TERM:                         xterm-256color
  JS_RUNTIME_VERSION:           v24.11.0
  JS_RUNTIME_NAME:              node
  NODE_PACKAGE_MANAGER:         pnpm/10.12.4

Biome Configuration:
  Status:                       Loaded successfully
  Path:                         biome.jsonc
  Formatter enabled:            true
  Linter enabled:               true
  Assist enabled:               true
  VCS enabled:                  true
  HTML full support enabled:    unset

Workspace:
  Open Documents:               0

Bug Explanation

If my hypothesis is correct, in a .svelte file, using the generics attribute in the <script> tag causes the biome parser to not parse correctly, raising the error:

'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.

Related: #2245

Background

I am using shadcn-svelte and their form-field.svelte, for example, looks like this:

<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">

import * as FormPrimitive from "formsnap"

import type { FormPath } from "sveltekit-superforms";

import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js"

import type { HTMLAttributes } from "svelte/elements";

let {
		ref = $bindable(null),
		class: className,
		form,
		name,
		children: childrenProp,
		...restProps
	}: FormPrimitive.FieldProps<T, U> &
		WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
</script>

<FormPrimitive.Field {form} {name}>
	{#snippet children({ constraints, errors, tainted, value })}
		<div
			bind:this={ref}
			data-slot="form-item"
			class={cn("space-y-2", className)}
			{...restProps}
		>
			{@render childrenProp?.({ constraints, errors, tainted, value: value as T[U] })}
		</div>
	{/snippet}
</FormPrimitive.Field>

it has the following script tag:

<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
    ...
</script>

Running biome check on the file will raise the error on lines with type imports, like:

import type { FormPath } from "sveltekit-superforms";

If i delete the generics attribute in the script tag, so it looks like (<script lang="ts">), the error disappears.

What happened?

  1. Have .svelte file with a tag <script lang="ts" generics="...<...>"> (with > inside generics)
  2. Run biome check on the file

Expected result

I expect no 'import {type x ident}' are a TypeScript only feature errors on type imports within the script block.

Code of Conduct

  • I agree to follow Biome's Code of Conduct

Metadata

Metadata

Assignees

No one assigned

    Labels

    S-Bug-confirmedStatus: report has been confirmed as a valid bug

    Type

    No fields configured for Bug.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions