MDXCreateElement breaks forwardRef()

Subject of the issue

I’m not sure if this is gatsby-mdx or this repo, so forgive me here. I upgraded from v0 to v1 and am experiencing this problem. v0 seemed to work okay.

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Your environment

• macOS 10.14.4

    "@mdx-js/mdx": "^1.0.19",
    "@mdx-js/react": "^1.0.16",
    "gatsby-mdx": "^0.6.3",

• Node 10, npm 6.8

Steps to reproduce

I don’t actually know if this reproduces (haven’t tested sorry 😥 ), but this is the general idea so hopefully it gives pointers:

Framework.js:

import {useRef, cloneElement} from 'react';
import styled from 'styled-components';

export function Parent({ children }) {
  const ref = useRef();

  return cloneElement(children, {
    ref(node) {
      ref.current = node;
    }
  });
}

export const Child = styled.button``;

index.mdx:

import {Parent, Child} from '../components/Framework';

<Parent>
  <Child />
</Parent>

I think the <Child /> is no longer wrapped in forwardRef, causing the error message

Expected behaviour

MDXCreateElement should keep forwardRef return value so the element can be given a ref

Actual behaviour

It doesn’t?

[atomiks]

I think I found a fix with node_modules debugging.

Wrap MDXCreateElement itself in forwardRef like this:

const MDXCreateElement = forwardRef((props, ref) => {
  const {
    components: propComponents,
    mdxType,
    originalType,
    parentName,
    ...etc
  } = props;

  const components = useMDXComponents(propComponents);
  const type = mdxType;
  const Component =
    components[`${parentName}.${type}`] ||
    components[type] ||
    DEFAULTS[type] ||
    originalType;

  if (propComponents) {
    return React.createElement(Component, {
      ref,
      ...etc,
      components: propComponents
    });
  }

  return React.createElement(Component, {ref, ...etc});
});

Seems to fix the issue for me.

[johno]

Fixed by #751 and released as @mdx-js/react@1.4.2.