Element Type Invalid Error rendering Custom block type

[albertlockett]

Hi, I'm wondering if this is a bug or if it's something I'm doing wrong. I'm following the instructions on the draft-js site for custom block rendering:

https://draftjs.org/docs/advanced-topics-custom-block-render-map.html#content

When I try to swap the block type to the custom block type I configure, it gives the error:

Uncaught Error: Element 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.

Here's a github I made to show the problem:
https://github.com/albertlockett/draftjs-help/

If you click just below the button, (in the editor), and the click the button to change the block type, you'll get that error in the console.

I would expect that it renders the editor to change ot my custom block type.

I experienced this in Chrome
"draft-js": "0.10.0",
"react": "15.4.2",

[albertlockett]

I think I figured out what's happening:

The docs say to do this:

const blockRenderMap = Immutable.Map({
  'MyCustomBlock': {
    // element is used during paste or html conversion to auto match your component;
    // it is also retained as part of this.props.children and not stripped out
    element: 'section',
    wrapper: MyCustomBlock,
  }
});

But the code in DraftEditorContent.react.js does this:

  if (info.wrapperTemplate) {
  const blocks = [];
  do {
    blocks.push(processedBlocks[ii].block);
    ii++;
  } while (
    ii < processedBlocks.length &&
    processedBlocks[ii].wrapperTemplate === info.wrapperTemplate
  );
  const wrapperElement = React.cloneElement(
    info.wrapperTemplate,  // this is what gets passed in as wrapper from snippet above
    {
      key: info.key + '-wrap',
      'data-offset-key': info.offsetKey,
    },
    blocks
  );

React.cloneElement is expecting an Element as the first argument, not the component
https://reactjs.org/docs/react-api.html#cloneelement

So it works if you do this:

const blockRenderMap = Immutable.Map({
  'MyCustomBlock': {
    element: 'section',
    wrapper: <MyCustomBlock />,
  }
});

So should the solution be to update the documentation, or to have DraftEditorContent create an instance of the info.wrapperTemplate Component when it tries to render the block and pass that as the argument when it creates the outputBlocks?

(edit: fixed indentation)

[leoselig]

@albertlockett Confirmed – both the issue explanation and the workaround
Needless to say, I hope that the docs outline the API as it should be (cloning the elements feels weird)

[mattgreenfield]

I can also confirm that the above change fixes the problem. Please see pull request #1837