search

wix-incubator / mjml-react

React component library to generate the HTML emails on the fly
MIT License
989 stars 50 forks source link

React 18 compatibility with TypeScript #86

Closed mrlubos closed 2 years ago

mrlubos commented 2 years ago

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 commented 2 years ago

It looks like known React 18 issue https://github.com/facebook/react/issues/24304 - there are number of suggestions how to fix it.

mrlubos commented 2 years ago

Thanks @daliusd !