React 18 implicit children typing issue?

[girvo]

What package has an issue

@mantine/core

Describe the bug

So the @types/react typing package for TypeScript, for React 18, has remove the implicit children for all component types, and this is causing me to run into some issues with our extensions of some Mantine components.

import React, { ComponentType, Key, Fragment } from 'react'

// given a Props interface with this:
  header?: () => React.ReactNode
}

// snip
  return (
    <div className={classes.grid}>
      {props.header && (
        <MediaQuery largerThan="sm" styles={hide}>
          {props.header()}
        </MediaQuery>
      )}

When used with React 18.0.1, @types/react 18.0.1 and @mantine/core v4.1.3, this gives an error about React.ReactNode not being React.ReactNode!

At the {props.header()} line:

Type 'React.ReactNode' is not assignable to type 'import("/workspaces/cobalt-dev/node_modules/@types/react/index").ReactNode'.
  Type '{}' is not assignable to type 'ReactNode'.

I'm not entirely sure what is causing this, other than some kind of typing mismatch when trying to use React v18 and it's v18 @types package with Mantine?

In which browser did the problem occur

All browsers

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

No response

Are you willing to participate in fixing this issue and create a pull request with the fix

No response

Possible fix

No response

[fl0wx]

@girvo yesterday i found this, which could be related: https://www.reddit.com/r/reactjs/comments/u2rbbx/library_authors_should_revise_typings_to_support/

[rtivital]

Mantine does not use FC type anywhere, so most likely provided codemod will not help.

[girvo]

@rtivital Yeah I initially assumed it was something to do with that as well initially (you can tell in my initial paragraph thats what I thought it was) but then checked the source and saw that the FC type isn't used anywhere, and yet the type error still exists. Super odd.

Is there anything I can do to help with tracking this down? It's unfortunately prevented us from migrating to v18 at work. Happy to do some more debugging or see if I can reproduce a tiny test case for it if need be, or post more of the source we have for it, but it's super weird. Basically thinks it's React.ReactNode type is the empty object, instead of the actual ReactNode definition, despite both my code and Mantine ostensibly using the same @types/react package

https://stackoverflow.com/questions/71852153/type-is-not-assignable-to-type-reactnode

facebook/react#24304

In a different context, someone else has run into this recently as well, but without much success in tracking down the issue it seems

[wes337]

Mantine does not use FC type anywhere, so most likely provided codemod will not help.

Are you sure? I ran the codemod (https://github.com/eps1lon/types-react-codemod) and quite a few changes were made:

[wes337]

@girvo Have you tried adding React 17 to the resolutions of your package.json?

"resolutions": {
    "@types/react": "17.0.8"
}

[girvo]

@wes337 While using react@18.0.1 as-the-library itself?

[wes337]

I think so. I was just reading in that issue you linked, and many people found a solution using resolutions: facebook/react#24304 (comment).

[spigelli]

Also experiencing

TS2322: Type '{ children: Element[]; size: "sm"; style: { height: string; }; }' is not assignable to type 'IntrinsicAttributes & ContainerProps & RefAttributes'.   Property 'children' does not exist on type 'IntrinsicAttributes & ContainerProps & RefAttributes'.

With versions:

    "@types/react": "18.0.13",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "@mantine/core": "^4.2.11",

Not sure if that's related

[rtivital]

Fixed in 5.0