biomejs/biome

๐Ÿ› noUselessFragments fix result has invalid jsx syntax

Closed this issue ยท 1 comments

Environment information

(edited)

CLI:
  Version:                      1.9.4

Biome Configuration:
  Status:                       Loaded successfully
  Formatter disabled:           false
  Linter disabled:              false
  Organize imports disabled:    false
  VCS disabled:                 false

Linter:
  JavaScript enabled:           true
  JSON enabled:                 true
  CSS enabled:                  true
  GraphQL enabled:              false
  Recommended:                  true
  All:                          false

What happened?

Open in Biome Playground

Input

<Suspense
	fallback={
		<>
			<span>Loading...</span>
		</>
	}
>
	{children}
</Suspense>;

Biome fix output

<Suspense fallback=<span>Loading...</span>>
	{children}
</Suspense>;

Issue Details

The fix removes the fragment but doesn't wrap the prop value in curly braces ({}). This results in invalid JSX syntax, as seen in the fix output above.

Expected result

<Suspense fallback={<span>Loading...</span>}>
	{children}
</Suspense>;

Should the formatter be responsible for fixing this, or is it a linter issue?

Code of Conduct

  • I agree to follow Biome's Code of Conduct

i will fix this~