Skip to content

[Bug]: display-name false positive when React is shadowed #3924

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
2 tasks done
knightedcodemonkey opened this issue May 9, 2025 · 3 comments
Open
2 tasks done

Comments

@knightedcodemonkey
Copy link

knightedcodemonkey commented May 9, 2025

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

react/display-name will report an error Component definition is missing display name when the React global import is shadowed within a function scope.

The same error does not occur for shadowed memo or forwardRef though.

Example

import React, { memo, forwardRef } from 'react'

const MixedShadowed = function () {
  const memo = (cb) => cb()
  const { forwardRef } = { forwardRef: () => null }
  const [React] = [{ memo, forwardRef }]

  const Comp = memo(() => {
    return <div>shadowed</div>
  })
  const ReactMemo = React.memo(() => null)
  const ReactForward = React.forwardRef((props, ref) => {
    return `${props} ${ref}`
  })
  const OtherComp = forwardRef((props, ref) => `${props} ${ref}`)

  return [Comp, ReactMemo, ReactForward, OtherComp]
}

Running eslint from the command line you'll see the error:

  11:21  error  Component definition is missing display name  react/display-name
  12:24  error  Component definition is missing display name  react/display-name

Expected Behavior

I know most people won't shadow React, memo or forwardRef, but I'd still expect the error to not be reported in this case.

eslint-plugin-react version

v7.37.5

eslint version

v9.26.0

node version

v22.15.0

@ljharb
Copy link
Member

ljharb commented May 9, 2025

Fair, but how would you have even run into this? Prior to the new jsx renderer, this wouldn't have even been possible, but certainly it could be with the new renderer.

@knightedcodemonkey
Copy link
Author

knightedcodemonkey commented May 9, 2025

how would you have even run into this?

I couldn't find a codemod that added the displayName so I've been writing my own to clean up a mess at work. Oh, and running the linter against my test runs.

@knightedcodemonkey
Copy link
Author

Here's the test that was catching this: https://github.com/knightedcodemonkey/display-name/blob/main/test/displayName.ts#L10-L42

For now I've disabled the rule around those lines.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

No branches or pull requests

2 participants