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 5 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