makeComponentReactive throws "TypeError: Cannot read property 'displayName' of undefined"

[dgcoffman]

When observer directly wraps a styled component from the very common library styled-components, the following error is thrown:

Uncaught TypeError: Cannot read property 'displayName' of undefined
    at makeComponentReactive (mobx-react/index.module.js:857)
    at target.render (mobx-react/index.module.js:1068)
    at updateForwardRef (react-dom/cjs/react-dom.development.js:8254)
    at beginWork (react-dom/cjs/react-dom.development.js:9002)
    at performUnitOfWork (react-dom/cjs/react-dom.development.js:11814)

The above error occurred in the <ForwardRef> component

Here's my code https://codesandbox.io/s/k3np5pvmm3

import * as React from 'react';
import { render } from 'react-dom';
import { observer } from 'mobx-react';
import styled from 'styled-components';

const A = styled.a`
  height: auto;
`;

const C = observer(A);

render(<C />, document.getElementById('root'));

package.json

"react": "16.6.1",
"styled-components": "4.0.3",
"mobx": "5.6.0",
"mobx-react": "5.3.6",

Here's the Chrome debugger on the line that throws

Apparently this is undefined in the upstream

mobx-react/src/observer.js

Line 356 in 2e2cf22

return makeComponentReactive.call(this, baseRender)

This only occurs with styled-components 4+ -- likely because they have switched to using React.forwardRef.

You will likely need some forwardRef check like

function isForwardRef(object) {
    return typeOf(object) === Symbol.for('react.forward_ref');
}

Relevant code from styled-components: https://github.com/styled-components/styled-components/blob/2975ff9f217c108737fa250bb3d8b38e017d9fa8/src/models/StyledComponent.js#L229

Any ideas?

Similar to #477

[pimterry]

This is a more general problem: mobx-react does not support any components that use React.forwardRef.

The discussion of the same problem and corresponding solution in redux-connect will probably be useful: reduxjs/react-redux#914.

[mweststrate]

@dgcoffman / @pimterry could one of you submit a PR to this repo with a test case that fails, to make sure we are fixing the proper thing? If you need to add additional libraries as dev dependencies that is fine

[pimterry]

@mweststrate I've opened a failing test PR here: #606

[mweststrate]

Should be fixed in 5.4.0!

[pimterry]

Amazing, thank you @mweststrate!