Skip to content

🐛 noUselessFragments fix result has invalid jsx syntax #4553

@maxmorozoff

Description

@maxmorozoff

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

Metadata

Metadata

Assignees

Labels

A-LinterArea: linterL-JavaScriptLanguage: JavaScript and super languagesS-Bug-confirmedStatus: report has been confirmed as a valid bug

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions