React-devtools: Cannot read property 'displayName' of undefined

[Dolinskaya]

Hi guys! I upgrade react-devtools to 3.4.0 version and catch an error:

Cannot read property 'displayName' of undefined in backend.js

Before 3.4.0 I had 3.3.2 and it was ok.
So, I can't use tab react-devtools, because that have waiting status:

Waiting for roots to load...

Browser: Ya.Browser v 18.9.0.3363 (64-bit)

[zebogen]

I observed this as well when rendering React Context elements with React 16.3.0. It works properly with React 16.3.1 and up.

Looks like a prefix was added to the context internal property on ReactContext elements in the 16.3.1 release: https://github.com/facebook/react/pull/12501

[benwiley4000]

Repro:

const MyContext = React.createContext();
ReactDOM.render(
  <MyContext.Provider />,
  document.getElementById('container')
);

Version: 3.4.0 (september 20)
Google Chrome: 67.0.3396.62 (Official Build) (64-bit)
OS: Linux (elementary 4.13.0-43-generic)

Here's the line where we hit a snag: https://github.com/facebook/react-devtools/blob/69d137c7feb95c1559ffe54045d518fb86e19e05/backend/attachRendererFiber.js#L272

Stack trace:

backend.js:9969 Uncaught TypeError: Cannot read property 'displayName' of undefined
    at getDataFiber (backend.js:9969)
    at enqueueMount (backend.js:10137)
    at mountFiber (backend.js:10225)
    at backend.js:10285
    at Set.forEach (<anonymous>)
    at Object.walkTree (backend.js:10283)
    at backend.js:8534
    at <anonymous>:52:32
    at Array.map (<anonymous>)
    at Object.emit (<anonymous>:51:66)
getDataFiber @ backend.js:9969
enqueueMount @ backend.js:10137
mountFiber @ backend.js:10225
(anonymous) @ backend.js:10285
walkTree @ backend.js:10283
(anonymous) @ backend.js:8534
(anonymous) @ VM79:52
emit @ VM79:51
setupBackend @ backend.js:8621
module.exports @ backend.js:8567
(anonymous) @ backend.js:116
g @ backend.js:981
EventEmitter.emit @ backend.js:894
(anonymous) @ backend.js:302
(anonymous) @ backend.js:7619
(anonymous) @ backend.js:7618
_handleMessage @ backend.js:7611
listener @ backend.js:92
postMessage (async)
handleMessageFromDevtools @ contentScript.js:18
EventImpl.dispatchToListener @ VM68 extensions::event_bindings:403
publicClassPrototype.(anonymous function) @ VM74 extensions::utils:138
EventImpl.dispatch_ @ VM68 extensions::event_bindings:387
EventImpl.dispatch @ VM68 extensions::event_bindings:409
publicClassPrototype.(anonymous function) @ VM74 extensions::utils:138
dispatchOnMessage @ VM75 extensions::messaging:392

[benwiley4000]

Opened a PR to fix: #1175.

[matchu]

Our team is experiencing this too! Would be helpful to have this PR merged 🙇

I made this repository to help reproduce the bug, before I realized that there was already a ticket! Linking here, just in case it helps :)

[Albert-Gao]

I have this issue too. And strange enough, it works on FF while not on Chrome, all with the latest version.

Took me a while to figure out it's not my fault, mobx's fault, mobx-react's fault nor CRA2's fault(ok, after upgrading to CRA 2.0.5 from 2.0.4, it works on FF, but still no luck for chrome)...

[fev4]

Just got this problem too. After updating to [email protected], [email protected] got error at backend.js line 9159

backend.js:9159 Uncaught TypeError: Cannot read property 'displayName' of null
    at getDisplayName (backend.js:9159)
    at getDataFiber (backend.js:9888)
    at enqueueMount (backend.js:10158)
    at mountFiber (backend.js:10246)
    at backend.js:10306
    at Set.forEach (<anonymous>)
    at Object.walkTree (backend.js:10304)
    at backend.js:8534
    at <anonymous>:52:32
    at Array.map (<anonymous>)

This is the part of backend.js where the problem occurs:

// The displayName property is not guaranteed to be a string.
// It's only safe to use for our purposes if it's a string.
// github.com/facebook/react-devtools/issues/803
if (typeof type.displayName === 'string') {
  displayName = type.displayName;
}

if (!displayName) {
  displayName = type.name || fallbackName;
}

Just here to chime in, if there's anything I can do I'd be glad to help.

[dbryantm]

I just added #1195. Only way I could fix it is to rollback to [email protected] and [email protected].

[cdaz5]

For what its worth @fillipvt I had the same issue when upgrading, turns out I had to restart my chrome as the react dev tools were version 3.4.0 .. once I restarted the dev tools were upgraded to 3.4.2 and the error went away... hope this helps!!

[dbryantm]

That's exactly what happened to me in #1195, @cdaz5. Was pretty frustrating as I had tried to update the dev tools manually already, but restarting Chrome was the only way I could see the changes.

[cdaz5]

nice @dbryantm! I totally missed your comment above! Dang, wish I would have seen it before lol could have saved me some time.

[tannera]

Getting this issue after upgrading to react-native 0.57.5 and React 16.6.3

[TK-Nelson]

Getting 'Cannot read property 'displayName' of null. Using React DevTools v. 3.4.3., React v. 16.6.3, React-Dom. Gonna try rolling back to 16.5.2 and see what happens.

[TK-Nelson]

Nah still happening.

[hristo-kanchev]

@blksheep93 Can't seem to reproduce this.

Can you post a repro snippet (or codesandbox link)?

Thanks!

[TK-Nelson]

Sorry, but I've never used codesandbox before, or else I'd set up a link for you. All the research I've done to fox this suggests that the problem is based around the consumer.

Repro:

RDT Version: 3.4.3
Chrome Version: 71.0.3578.98
OS: Mac mojave version 10.14.2

Here goes first stack trace

> Uncaught TypeError: Cannot read property 'displayName' of null
>     at getDisplayName (backend.js:9159)
>     at getDataFiber (backend.js:9888)
>     at enqueueMount (backend.js:10158)
>     at mountFiber (backend.js:10246)
>     at backend.js:10306
>     at Set.forEach (<anonymous>)
>     at Object.walkTree (backend.js:10304)
>     at backend.js:8534
>     at <anonymous>:52:32
>     at Array.map (<anonymous>)

and the snippet it's pointing to:

 // The displayName property is not guaranteed to be a string.
      // It's only safe to use for our purposes if it's a string.
      // github.com/facebook/react-devtools/issues/803
      if (typeof type.displayName === 'string') {
        displayName = type.displayName;

then the second error in the stack trace

Warning: React DevTools encountered an error: TypeError: Cannot read property 'displayName' of null
warningWithoutStack | @ | react-dom.development.js:506
-- | -- | --
  | (anonymous) | @ | react-dom.development.js:9577
  | onCommitRoot | @ | react-dom.development.js:9625
  | commitRoot | @ | react-dom.development.js:17493
  | completeRoot | @ | react-dom.development.js:18912
  | performWorkOnRoot | @ | react-dom.development.js:18841
  | performWork | @ | react-dom.development.js:18749
  | performSyncWork | @ | react-dom.development.js:18723
  | requestWork | @ | react-dom.development.js:18592
  | scheduleWork | @ | react-dom.development.js:18401
  | enqueueSetState | @ | react-dom.development.js:12313
  | module.exports../node_modules/react/cjs/react.development.js.Component.setState | @ | react.development.js:372
  | setTimeout | @ | prices.jsx:45
  | setTimeout (async) |   |  
  | networkRequest | @ | prices.jsx:43
  | networkRequest | @ | react-hot-loader.development.js:587
  | componentDidMount | @ | prices.jsx:33
  | componentDidMount | @ | react-hot-loader.development.js:577
  | commitLifeCycles | @ | react-dom.development.js:15961
  | commitAllLifeCycles | @ | react-dom.development.js:17262
  | callCallback | @ | react-dom.development.js:149
  | invokeGuardedCallbackDev | @ | react-dom.development.js:199
  | invokeGuardedCallback | @ | react-dom.development.js:256
  | commitRoot | @ | react-dom.development.js:17458
  | completeRoot | @ | react-dom.development.js:18912
  | performWorkOnRoot | @ | react-dom.development.js:18841
  | performWork | @ | react-dom.development.js:18749
  | performSyncWork | @ | react-dom.development.js:18723
  | requestWork | @ | react-dom.development.js:18592
  | scheduleWork | @ | react-dom.development.js:18401
  | scheduleRootUpdate | @ | react-dom.development.js:19069
  | updateContainerAtExpirationTime | @ | react-dom.development.js:19097
  | updateContainer | @ | react-dom.development.js:19154
  | module.exports../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render | @ | react-dom.development.js:19416
  | (anonymous) | @ | react-dom.development.js:19556
  | unbatchedUpdates | @ | react-dom.development.js:18952
  | legacyRenderSubtreeIntoContainer | @ | react-dom.development.js:19552
  | render | @ | react-dom.development.js:19613
  | (anonymous) | @ | index.js:10
  | ./app/index.js | @ | renderer.dev.js:3503
  | __webpack_require__ | @ | bootstrap:724
  | fn | @ | bootstrap:101
  | 0 | @ | fetch.js:516
  | __webpack_require__ | @ | bootstrap:724
  | module.exports../app/Routes.js.Object.defineProperty.value | @ | bootstrap:791
  | (anonymous)

and the code its referring to ( @prices.jsx)

render() {
    return (
      <Provider value={this.state.data} >
        {this.state.loading ? "Loading..." : this.props.children}
      </Provider>
    )
  }

[vramana]

@blksheep93 Setup an test repo that reproduces your error using create-react-app.

[matchu]

@hristo-kanchev @vramana: Does this repro case work for y'all? https://github.com/matchu/react-devtools-context-bug-repro

[vramana]

@matchu Works I think. I'll check later.

[bvaughn]

To clarify: React 16.3.0 used context and 16.3.1+ use _context.

A repro case can be found here: https://unpkg.com/[email protected]/cjs/react.development.js