Frame Element: Invariant Violation

Describe the bug Invariant violation when running Basic example inside React App. Error occurs on <Frame> element and below.

Uncaught Error: Invariant failed: A <Element /> that is used inside a User Component must specify an id prop, eg: <Element id="text_element">...</Element>.

To Reproduce

1. Install Basic project dependencies, and move folders to correct locations
2. Import the index.js function export into an existing React Component.
3. Error on load

Expected behavior The Basic Example’s main export is a function component, which should mean it is importable within an existing React App.

Your environment

Software	Version(s)
craft.js	0.1.0-beta.13
React	16.12.0
TypeScript	none
Browser	Opera 72.0.3815.320 (Chrome 86)
npm/Yarn	6.14.5
Operating System	Windows 10 x64

[fraank]

For me, changing

<Element id="canvas" className="canvas" canvas></Element>

to

<Element id="canvas" is="div" className="canvas" canvas></Element>

… solved it.

[denis-ismailaj]

For me this issue arised when trying to have a Container-based component that accepted any children. (No is attribute on the Element tag)

What worked for me was to create a “constraint” anyway, and use that.

For example:

export const Anything = ({children}) => <div>{children}</div>

Anything.craft = {rules: {canMoveIn: () => true}}; 

Usage:

<Element canvas id="sth" is={Anything}>