[Bug]: display-name false positive when React is shadowed
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
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.
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.
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.
Hi! I'd like to work on this issue if it's still available. Let me know if that works for you.