[Bug]: Display-name False Positive When React Is Shadowed

by ADMIN 58 views

Bug: display-name false positive when React is shadowed

In this article, we will discuss a bug in the eslint-plugin-react plugin, specifically related to the display-name rule. The bug causes a false positive error when the React global import is shadowed within a function scope. This error does not occur when other React components, such as memo or forwardRef, are shadowed.

Is there an existing issue for this?

Before we dive into the details of the bug, let's confirm that this is a unique issue. We have searched the existing issues and have not found a similar problem.

Description Overview

The react/display-name rule is designed to report an error when a component definition is missing a display name. However, in the case of shadowed React imports, this rule reports a false positive error.

Example

To illustrate this issue, let's consider the following example code:

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

type ForwardRefObject = {
  forwardRef: (cb: (props: object, ref: object) => React.ReactNode) => React.ReactNode
}
const MixedShadowed = function () {
  const memo = (cb: () => React.ReactNode) => cb()
  const { forwardRef } = { forwardRef: () => null } as ForwardRefObject
  const [React] = [{ memo, forwardRef }] as const
  const Comp = memo(() => {
    return <div>shadowed</div>
  })
  const ReactMemo = React.memo(() => null) // error triggered
  const ReactForward = React.forwardRef((props, ref) => { // error triggered
    return `${props} ${ref}`
  })
  const OtherComp = forwardRef((props, ref) => `${props} ${ref}`)

  return [Comp, ReactMemo, ReactForward, OtherComp]
}

When we run ESLint from the command line, we see the following error:

error  Component definition is missing display name  react/display-name

This error is reported twice, once for ReactMemo and once for ReactForward.

Expected Behavior

We would expect the display-name rule to not report an error in this case, as the React import is shadowed within a function scope.

eslint-plugin-react version

We are using version 7.37.5 of the eslint-plugin-react plugin.

eslint version

We are using version 9.26.0 of ESLint.

node version

We are using version 22.15.0 of Node.js.

In conclusion, the display-name rule in the eslint-plugin-react plugin reports a false positive error when the React global import is shadowed within a function scope. This error does not occur when other React components, such as memo or forwardRef, are shadowed. We have confirmed that this is a unique issue and have provided an example code to illustrate the problem.

To resolve this issue, we recommend updating to the latest version of the eslint-plugin-react plugin. Additionally, we suggest using a more robust linter that can handle complex scenarios like this.

We plan to investigate this issue further and provide a fix in a future release of the eslint-plugin-react plugin.

We would like to thank the ESLint team for their help in resolving this issue.

In our previous article, we discussed a bug in the eslint-plugin-react plugin, specifically related to the display-name rule. The bug causes a false positive error when the React global import is shadowed within a function scope. In this article, we will provide a Q&A section to address some common questions related to this issue.

Q: What is the display-name rule in ESLint?

A: The display-name rule in ESLint is designed to report an error when a component definition is missing a display name. A display name is a string that is used to identify a component in the React DevTools.

Q: Why is the display-name rule reporting a false positive error in this case?

A: The display-name rule is reporting a false positive error because the React global import is being shadowed within a function scope. This means that the React import is being redefined within the function scope, which causes the rule to report an error.

Q: Why does this error not occur when other React components, such as memo or forwardRef, are shadowed?

A: This error does not occur when other React components, such as memo or forwardRef, are shadowed because they do not have a display name. The display-name rule is only concerned with components that have a display name.

Q: How can I fix this issue?

A: To fix this issue, you can update to the latest version of the eslint-plugin-react plugin. Additionally, you can use a more robust linter that can handle complex scenarios like this.

Q: Is this issue specific to the eslint-plugin-react plugin?

A: No, this issue is not specific to the eslint-plugin-react plugin. It is a general issue that can occur with any linter that uses the display-name rule.

Q: Can I disable the display-name rule for this specific case?

A: Yes, you can disable the display-name rule for this specific case by adding a configuration option to your ESLint configuration file.

Q: What are some best practices for avoiding this issue in the future?

A: Some best practices for avoiding this issue in the future include:

  • Avoiding the use of shadowed imports
  • Using a more robust linter that can handle complex scenarios like this
  • Updating to the latest version of the eslint-plugin-react plugin

In conclusion, the display-name rule in the eslint-plugin-react plugin reports a false positive error when the React global import is shadowed within a function scope. We have provided a Q&A section to address some common questions related to this issue. By following the best practices outlined above, you can avoid this issue in the future.

We would like to thank ESLint team for their help in resolving this issue.