Preact: React Dev Tools 鈥撀燭ypeError: Cannot read property 'constructor' of null

Created on 23 Aug 2018  路  6Comments  路  Source: preactjs/preact

I just added a conditional return to BitMidi's Footer component so it sometimes returns null.

The React Dev Tools immediately stopped working when I did that, with the following error:

TypeError: Cannot read property 'constructor' of null
    at createReactElement (devtools.js:19)
    at createReactCompositeComponent (devtools.js:89)
    at updateReactComponent (devtools.js:144)
    at createReactCompositeComponent (devtools.js:122)
    at updateReactComponent (devtools.js:144)
    at Object.componentAdded (devtools.js:236)
    at Object.preact.options.afterMount (devtools.js:374)
    at flushMounts (preact.js:98)
    at diff (preact.js:111)
    at render (preact.js:370)

The added line is here: https://github.com/feross/bitmidi.com/blob/d1fe2d39f9a99a307a86d38bdfd265510613b00f/src/views/footer.mjs#L13

Removing this line makes the error go away. Disabling React Dev Tools also makes the error go away.

  • Preact 8.3.1
  • React Dev Tools 3.3.0

I'm sorry that this is not a small test case, but I wanted to check if anyone had any idea what's going on here first. Is this a known bug?

bug devtools in X

Most helpful comment

Sorry for not replying 鈥撀燽een away from GitHub. Thanks for fixing the issue @marvinhagemeister

All 6 comments

Hmm - not a known bug, no, this one seems new. I'm going to have to do pull this up in a proper debugger, there is a bit of ambiguity in that stack I can't pin down just looking at the source.

Uncaught (in promise) TypeError: Cannot read property 'constructor' of null
    at createReactElement (devtools.js?69b5:19)
    at createReactCompositeComponent (devtools.js?69b5:89)
    at updateReactComponent (devtools.js?69b5:144)
    at createReactCompositeComponent (devtools.js?69b5:122)
    at updateReactComponent (devtools.js?69b5:144)
    at Object.componentAdded (devtools.js?69b5:236)
    at Object.preact.options.afterMount (devtools.js?69b5:374)
    at flushMounts (preact.js?10a9:102)
    at renderComponent (preact.js?10a9:318)
    at rerender (preact.js?10a9:38)

@feross Had the same issue when using custom redirect component. Thought that instant redirect might be an issue so pushed it to next frame

componentWillMount() { setTimeout(() => { route(this.props.to, true); }, 0) }

Solved the problem for me. Hope it helps

@feross Can you check if this issue is still present with the Preact X alpha? We completely rewrote our devtools adapter and I'd love to get all devtools bugs fixed before going gold :+1:

I tried various forms of conditional components and can't reproduce the described issue with Preact X :tada:

Sorry for not replying 鈥撀燽een away from GitHub. Thanks for fixing the issue @marvinhagemeister

Was this page helpful?
0 / 5 - 0 ratings