FormidableLabs/react-ssr-prepass

Exception "Cannot read property 'prototype' of undefined" caused by wrong order of React.memo + Redux.connect

padys opened this issue · 1 comments

padys commented

I found strange problem with react-ssr-prepass. In fact it seems to be problem with upgrade of react (16.11.0 -> 16.12.0) or redux (4.0.4 -> 4.0.5) or... who knows.

I've had component like:

import * as React from 'react'
import { connect } from 'react-redux'

const LinkComponent: React.FC<...> = (...) => (...)

export default connect(mapStateToProps)(React.memo(LinkComponent))

It worked with react-ssr-prepass until upgrade of react/redux/...

But after then the react-ssr-prepass started throwing exception in

export const shouldConstruct = (Comp: ComponentType<*>): boolean %checks =>

used in
return shouldConstruct(type)

that:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
TypeError: Cannot read property 'prototype' of undefined
    at render ([...]/node_modules/react-ssr-prepass/src/element.js:25:15)
    at visitElement ([...]/node_modules/react-ssr-prepass/src/visitor.js:165:23)
    at visitLoop ([...]/node_modules/react-ssr-prepass/src/visitor.js:189:24)
    at visitChildren ([...]/node_modules/react-ssr-prepass/src/visitor.js:230:22)
    at [...]/node_modules/react-ssr-prepass/src/index.js:68:5
    at processTicksAndRejections (internal/process/task_queues.js:85:5)

I've checked that is true. In generated code (node_modules/react-ssr-prepass/dist/react-ssr-prepass.development.js):

var render$3 = function(type, props, queue, visitor, element) {
  return (Comp = type).prototype && Comp.prototype.isReactComponent ? function(type, props, queue, visitor, element) {

type is undefined.

I found that the problem was in my code with line:

export default connect(mapStateToProps)(React.memo(LinkComponent))

When I changed it to (changed React.memo/Redux.connect order):

export default React.memo(connect(mapStateToProps)(LinkComponent))

problem disappear.

It is not full investigation of problem, but is clue for others with similar problem.

Can you please add some more details on what you're doing?

I looked into upgrading React and everything still works on our end. However, looking at how connect is implemented, this issue looks suspciously similar to what's been fixed in this PR: #15

Are you on react-ssr-prepass@ >= 1.1.6?

Edit: Nevermind, this is the same issue as #15, but the opposite way around.