Preact: Possible Preact 8 regression: Cannot read property 'toLowerCase' of undefined

[angus-c]

Looks like it's during VDOM diffing

Error occurs in isNamedNode
https://github.com/developit/preact/blob/52bb91e17a56e6f3dba050c3ae001292b6ff2285/src/vdom/index.js#L27

Stack (bundled) is

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
    at isNamedNode (vendor-bfd2f8511748e755b3c2.js:2619)
    at idiff (vendor-bfd2f8511748e755b3c2.js:2399)
    at innerDiffNode (vendor-bfd2f8511748e755b3c2.js:2502)
    at idiff (vendor-bfd2f8511748e755b3c2.js:2426)
    at diff (vendor-bfd2f8511748e755b3c2.js:2347)
    at renderComponent (vendor-bfd2f8511748e755b3c2.js:1121)
    at renderComponent (vendor-bfd2f8511748e755b3c2.js:1106)
    at setComponentProps (vendor-bfd2f8511748e755b3c2.js:1028)
    at buildComponentFromVNode (vendor-bfd2f8511748e755b3c2.js:1203)
    at idiff (vendor-bfd2f8511748e755b3c2.js:2393)

Let me know if you need more info.

[developit]

@angus-c Looks like you're rendering an undefined component. In previous versions this would just produce <undefined> in the DOM, now it throws.

[angus-c]

OK, is it possible to throw a custom exception which identifies the type of the undefined component? Tracked down one but seems there must be others.

[developit]

There's no type because it's undefined. It's an object that looks like this:

VNode({ nodeName: undefined, attributes: null, children: [], key: null })

If you turn on your debugger to break on uncaught exceptions you should be able to jump 2 levels up the stack and see the VNode (let me know if this makes sense)

[developit]

Ah - I knew I had something for this: here's a plugin that will instead throw an exception when you declare the VNode, rather than when rendering it:

https://gist.github.com/developit/7fda739f5dea675386d6c48ae96af667

That will give you a much better debug output - it'll show you which component tried to render the undefined element.

[angus-c]

Thanks—this did the trick! (I'm already wrapping render so I just had to add a one liner). It was an async component wrapper that conditionally includes children.

[developit]

Awesome! Yeah sortof an odd bug here.

FWIW I think we're going to revert the throw here. It's nice to make people aware of undefined components, but it's probably a little too harsh to break rendering when encountering them. That plugin is going to find it's way into a wrapper around preact/devtools, where we'll be adding a bunch of debugging tips & helpers:

if (process.env.NODE_ENV==='development') {
  // enables devtools & things like undefined component warnings:
  require('preact/debug');
}

[angus-c]

Are you definitely planning to release the no-throw version? If that's the case it probably makes sense for us to hold off upgrading production to v8 until that release is available. (We may have other components that null render in edge case conditions).

[developit]

Null renders are okay, they don't throw. This only happens when you render a component with no constructor:

const Okay = () => null;   // all good

let Foo;  // undefined
const NotOkay = () => <Foo />;    // not good - h(Foo) = h(undefined)

[developit]

The throw during render has been reverted in 8.1.0.