Lastest @types/react (18.2.33) incompatible with current Mjml types

[wayne-crosby]

Upgrading from: "@types/react": "18.2.21" to "@types/react": "18.2.33" seems to cause type errors with mjml.

yarn upgrade changes yarn.lock from:

"@types/react@*", "@types/react@18.2.21", "@types/react@>=16", "@types/react@^18.0.15":
  version "18.2.21"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.21.tgz#774c37fd01b522d0b91aed04811b58e4e0514ed9"
  integrity sha512-neFKG/sBAwGxHgXiIxnbm3/AAVQ/cMRS93hvBpg8xYRbeQSPVABp9U2bRnPf0iI4+Ucdv3plSxKK+3CW2ENJxA==
  dependencies:
    "@types/prop-types" "*"
    "@types/scheduler" "*"
    csstype "^3.0.2"

to

"@types/react@*", "@types/react@>=16", "@types/react@^18.0.15":
  version "18.2.21"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.21.tgz#774c37fd01b522d0b91aed04811b58e4e0514ed9"
  integrity sha512-neFKG/sBAwGxHgXiIxnbm3/AAVQ/cMRS93hvBpg8xYRbeQSPVABp9U2bRnPf0iI4+Ucdv3plSxKK+3CW2ENJxA==
  dependencies:
    "@types/prop-types" "*"
    "@types/scheduler" "*"
    csstype "^3.0.2"

"@types/react@^18.2.21":
  version "18.2.33"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.33.tgz#055356243dc4350a9ee6c6a2c07c5cae12e38877"
  integrity sha512-v+I7S+hu3PIBoVkKGpSYYpiBT1ijqEzWpzQD62/jm4K74hPpSP7FF9BnKG6+fg2+62weJYkkBWDJlZt5JO/9hg==
  dependencies:
    "@types/prop-types" "*"
    "@types/scheduler" "*"
    csstype "^3.0.2"

After upgrading to newest types, the following type errors are generated on build.

'MjmlHead' cannot be used as a JSX component.
  Its type 'typeof MjmlHead' is not a valid JSX element type.
    Type 'typeof MjmlHead' is not assignable to type 'new (props: any, deprecatedLegacyContext?: any) => Component<any, any, any>'.
      Construct signature return types 'MjmlHead' and 'Component<any, any, any>' are incompatible.
        The types returned by 'render()' are incompatible between these types.
          Type 'import("/Users/wayne/gitroot/orgorg/code/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.ts(2786)

code:

<Mjml>
      <MjmlHead>
        <MjmlFont
          name="neue-haas-unica"
          href="https://use.typekit.net/qqd8jtb.css"
        />
      </MjmlHead>
</Mjml>

[IanEdington]

Hi @wayne-orgorg, Thanks for reporting.

I suspect it's because of having two versions of @types/react installed. mjml-react would be using one and your main app is using the other.

Could you try deleting both dependency blocks in the yark.lock file and try running yarn install. It should result in a single version "18.2.33" dependency block in the yark.lock file.

Let me know if that works, otherwise I'll try to reproduce locally.