Skip to content

[Bug]: jsx-curly-brace-presence template literal fix can break things #3607

Closed
@akx

Description

@akx
Contributor

Is there an existing issue for this?

  • I have searched the existing issues and my issue is unique
    My issue appears in the command-line and not only in the text editor

Description Overview

#3538 (see #3537) fixes a template literal with a single placeholder to just be that placeholder.

This can change the semantics of the prop:

const foo = 123;
<Component foo={`${foo}`} />

casts foo to a string (and thus passes "123"), while the "fixed"

const foo = 123;
<Component foo={foo} />

passes foo as a number 123; when using TypeScript and Component expects foo: string, that's a type error. When not using TypeScript, if Component behaves differently with a string prop cf. a number prop, this changes that behavior.

This also stands for children:

<span>An error occurred: {`${err}`}</span>

will be changed to

<span>An error occurred: {err}</span>

which can be a type error if err is not a valid React child (and when not using TypeScript, it can cause e.g. false not to get rendered as text.

Expected Behavior

Whether template literals with a single placeholder are unwrapped should be configurable.

eslint-plugin-react version

v7.33.0

eslint version

v8.45.0

node version

v20.3.0

Activity

akx

akx commented on Jul 21, 2023

@akx
ContributorAuthor
akx

akx commented on Jul 21, 2023

@akx
Author
added a commit that references this issue on Jul 21, 2023
f73bdab
taozhou-glean

taozhou-glean commented on Jul 21, 2023

@taozhou-glean
Contributor

did not realize use case like this until now, thanks for raising and fixing!

ljharb

ljharb commented on Jul 21, 2023

@ljharb
Member

Indeed, I think #3538 needs to be reverted.

added 3 commits that reference this issue on Jul 23, 2023
59d65dd
698d6c7
f818096
added a commit that references this issue on Dec 3, 2023
7c17dfa
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Participants

      @ljharb@akx@taozhou-glean

      Issue actions

        [Bug]: jsx-curly-brace-presence template literal fix can break things · Issue #3607 · jsx-eslint/eslint-plugin-react