react / react/react

[DevTools Bug]: Cannot read properties of undefined (reading 'displayName') at getWrappedDisplayName

Open
#26,022 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Component: Developer Tools Status: Unconfirmed Type: Bug
Dominant language
JavaScript
Stars
251k
Forks
51.4k
Avg merge
2d 4h
Merged PRs (30d)
53

Description

Website or app

https://pda.ritis.org/suite/download/

Repro steps

I noticed this when using React DevTools in my DEV environment with both Chrome and Firefox which is https://pda-dev.ritis.org/suite/download/ but I also see it in the production URL.

  1. Logged in URL with React Developer Tools 4.27.1 installed and enabled (in Chrome or Firefox)
  2. Navigate to a the Download tool
  3. Almost immediate the below error displays
    TypeError: Cannot read properties of undefined (reading 'displayName') at getWrappedDisplayName (react_devtools_backend.js:247:33) at getDisplayNameForFiber (react_devtools_backend.js:6384:62)
    outerType_undefined
    getWrappedDisplayName
    forwardRef

I'm unable to downgrade React DevTools in Chrome, but can in Firefox and notice that this started occuring with Version 4.27.0.

  • "4.27.1 Relased December 6, 2022" produces this error
  • "4.27.0 Released November 28, 2022" produces this error
  • "4.25.0 Released July 14, 2022" does not produce this error

Since I only use the browser version of react dev-tools, is there any way to install 4.25.0 in Chrome browser?

Other environment information:
Chrome "Version 109.0.5414.75 (Official Build) (64-bit)"
Firefox "Version 109.0 (64-bit)
Windows 10 Pro build 19044.2486

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

No response

Error component stack (automated)

No response

GitHub query string (automated)

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the error on the reported Download tool URL with React DevTools 4.27.x, then inspect the getWrappedDisplayName and getDisplayNameForFiber entry points in react_devtools_backend.js. Done means the repeated displayName error no longer appears in the affected browser versions while the reported workflow remains usable.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
devtools
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.