eslint-plugin-react icon indicating copy to clipboard operation
eslint-plugin-react copied to clipboard

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

Open knightedcodemonkey opened this issue 7 months ago • 4 comments

Is there an existing issue for this?

  • [x] I have searched the existing issues and my issue is unique
  • [x] 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

knightedcodemonkey avatar May 09 '25 03:05 knightedcodemonkey

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.

ljharb avatar May 09 '25 03:05 ljharb

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 avatar May 09 '25 04:05 knightedcodemonkey

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.

knightedcodemonkey avatar May 09 '25 16:05 knightedcodemonkey

Hi! I'd like to work on this issue if it's still available. Let me know if that works for you.

hyeonbinHur avatar May 22 '25 14:05 hyeonbinHur