Exception "Cannot read property 'prototype' of undefined" caused by wrong order of React.memo + Redux.connect
padys opened this issue · 1 comments
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
react-ssr-prepass/src/element.js
Line 24 in e82ad0c
used in
react-ssr-prepass/src/visitor.js
Line 80 in e82ad0c
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.