React 18 compatibility with TypeScript

[mrlubos]

Hey there! After upgrading to React 18, mjml no longer works without compiler errors. I get a lot of messages of this nature:

'MjmlSection' cannot be used as a JSX component.
  Its instance type 'MjmlSection' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'import("/project/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.

The file remains unchanged and it's pretty much just rendering <MjmlSection /> which is imported as import { MjmlSection } from 'mjml-react'. The types that I see for it come from @types/mjml-react version 2.0.4 and look like this: export class MjmlSection extends React.Component<MjmlSectionProps & BorderProps & PaddingProps & ClassNameProps> { }

Any help would be appreciated!

[daliusd]

It looks like known React 18 issue facebook/react#24304 - there are number of suggestions how to fix it.

[mrlubos]

Thanks @daliusd !