Craft.js with React version 17 or 18

[f99150175]

I was just working on the basic tutorial and when recreating the different components I was running in the following problem with the Toolbox component:

These are the lines of code which are causing the problem. The Container as well as the Toolbox component are just copy&pasted from the basic code example in Github w/o the colorpicker part inside the Container component:

connectors.create(ref!, )}> Container

This the error message I receive:

JSX element class does not support attributes because it does not have a 'props' property.
'Element' cannot be used as a JSX component.
Its type '{ new (): Element; prototype: Element; }' is not a valid JSX element type.
Type '{ new (): Element; prototype: Element; }' is not assignable to type 'new (props: any, deprecatedLegacyContext?: any) => Component<any, any, any>'.
Type 'Element' is missing the following properties from type 'Component<any, any, any>': context, setState, forceUpdate, render, and 3 more.

Did somebody got Craft.js to work with react version 17 or 18? If so, how did you solve the problem with Element component not being able to be used as a JSX component?

P.S. I know it works when I downgrade to version 16.8. However, version 16.8 is quite outdated (2 major versions behind active development) and active support ran out in October 2020 (links: https://endoflife.date/react and reactjs/react.dev#1745 (comment)). Apparently only bugs will be implemented which have critical security implications.

[hugominas]

We have several production projects using craft.js "0.2.0-beta.13" with react 18 and nextjs app router. The error you report has to do with the attributes you passing in to the Container "class does not support attributes because it does not have a 'props' property"

[franknoel]

@hugominas did you manage to use server components in your tree?
I'm unable to make it work unless I set the whole tree to be client components.