Cannot read property 'displayName' of undefined #1168

jpiggg · 2018-09-25T09:24:42Z

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 · 2018-09-25T21:32:49Z

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: facebook/react#12501

benwiley4000 · 2018-09-30T03:44:17Z

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:

react-devtools/backend/attachRendererFiber.js

Line 272 in 69d137c

name = `${fiber.type._context.displayName || 'Context'}.Provider`;

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 · 2018-09-30T04:10:07Z

Opened a PR to fix: #1175.

matchu · 2018-10-11T19:25:06Z

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 · 2018-10-25T02:37:13Z

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 · 2018-10-25T16:16:39Z

Just got this problem too. After updating to react@16.6.0, react-dom@16.6.0 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 · 2018-10-25T17:18:16Z

I just added #1195. Only way I could fix it is to rollback to react@16.5.2 and react-dom@16.5.2.

…2. See facebook/react-devtools#1168

cdaz5 · 2018-11-09T14:51:26Z

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 · 2018-11-09T15:23:46Z

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 · 2018-11-09T16:34:04Z

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

tannera · 2018-11-15T09:31:23Z

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

TK-Nelson · 2018-12-05T19:30:07Z

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 · 2018-12-05T20:18:42Z

Nah still happening.

hristo-kanchev · 2018-12-09T10:38:07Z

@blksheep93 Can't seem to reproduce this.

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

Thanks!

TK-Nelson · 2018-12-17T02:47:31Z

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 · 2018-12-17T03:47:13Z

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

matchu · 2018-12-20T01:45:42Z

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

vramana · 2018-12-20T05:53:10Z

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

bvaughn · 2019-01-03T19:20:27Z

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

A repro case can be found here: https://unpkg.com/react@16.3.0/cjs/react.development.js

benwiley4000 mentioned this issue Sep 30, 2018

Devtools crashes when rendering Context.Provider #1174

Closed

benwiley4000 mentioned this issue Sep 30, 2018

Doesn't error when rendering Context.Provider in old React. #1175

Closed

kingpalethe mentioned this issue Oct 26, 2018

Uncaught TypeError: Cannot read property 'displayName' of null MarshallOfSound/electron-devtools-installer#93

Closed

partiallymisplaced added a commit to AFMR/Kalstagram-Nev-and-Eury- that referenced this issue Oct 27, 2018

Rolls back React facebook/react-devtools#1168

ac49c4d

tongeren added a commit to tongeren/chittawela-next that referenced this issue Nov 9, 2018

Fixing React DevTools error by reverting to react and react-dom 16.5.…

32e446c

…2. See facebook/react-devtools#1168

tannera mentioned this issue Nov 15, 2018

Cannot read property 'displayName' of null jhen0409/react-native-debugger#287

Closed

bvaughn mentioned this issue Jan 3, 2019

Fix createContext runtime error for 16.3.0 #1264

Merged

bvaughn self-assigned this Jan 3, 2019

bvaughn closed this as completed in #1264 Jan 3, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot read property 'displayName' of undefined #1168

Cannot read property 'displayName' of undefined #1168

jpiggg commented Sep 25, 2018

zebogen commented Sep 25, 2018

benwiley4000 commented Sep 30, 2018

benwiley4000 commented Sep 30, 2018

matchu commented Oct 11, 2018

Albert-Gao commented Oct 25, 2018 •

edited

Loading

fev4 commented Oct 25, 2018

dbryantm commented Oct 25, 2018

cdaz5 commented Nov 9, 2018 •

edited

Loading

dbryantm commented Nov 9, 2018

cdaz5 commented Nov 9, 2018

tannera commented Nov 15, 2018

TK-Nelson commented Dec 5, 2018

TK-Nelson commented Dec 5, 2018

hristo-kanchev commented Dec 9, 2018

TK-Nelson commented Dec 17, 2018

vramana commented Dec 17, 2018

matchu commented Dec 20, 2018

vramana commented Dec 20, 2018

bvaughn commented Jan 3, 2019

Cannot read property 'displayName' of undefined #1168

Cannot read property 'displayName' of undefined #1168

Comments

jpiggg commented Sep 25, 2018

zebogen commented Sep 25, 2018

benwiley4000 commented Sep 30, 2018

benwiley4000 commented Sep 30, 2018

matchu commented Oct 11, 2018

Albert-Gao commented Oct 25, 2018 • edited Loading

fev4 commented Oct 25, 2018

dbryantm commented Oct 25, 2018

cdaz5 commented Nov 9, 2018 • edited Loading

dbryantm commented Nov 9, 2018

cdaz5 commented Nov 9, 2018

tannera commented Nov 15, 2018

TK-Nelson commented Dec 5, 2018

TK-Nelson commented Dec 5, 2018

hristo-kanchev commented Dec 9, 2018

TK-Nelson commented Dec 17, 2018

vramana commented Dec 17, 2018

matchu commented Dec 20, 2018

vramana commented Dec 20, 2018

bvaughn commented Jan 3, 2019

Albert-Gao commented Oct 25, 2018 •

edited

Loading

cdaz5 commented Nov 9, 2018 •

edited

Loading