Deserializing a Canvas with empty children raises an unhandled exception and fails about craft.js HOT 3 OPEN

A possible solution would be to check if the prop value is null before trying to access it.

Oops, yeah you're probably right, we should check if the value is null first.

I'm also trying to understand why the null children prop is there to begin with.

Might be because all the Canvas had no child nodes to begin with, or that all child nodes were deleted by the user. Either ways, we should check if the prop is null during serialisation as well.

Thanks for reporting this 💯

from craft.js.

Hey @prevwong thanks for the super quick reply,
I wanted to update here that we managed to bypass this issue by creating the Canvas with a placeholder span, this causes the children: null prop to disappear from the props object altogether.

Example component:

const ContainerItemComponent = props => {
  const { connectors } = useEditor();

  return (
    <div
      className="field-item"
      key={'static-container-item'}
      ref={ref => connectors.create(ref, <Canvas is={Container}><span></span></Canvas>)}
    >

      <span className="field-item-text">Container</span>
    </div>
  );
}

from craft.js.

I'm having a similar issue where I cannot drop items into empty containers. I always have to have a placeholder element present to drop something in there.

from craft.js.