Getting type errors after upgrading to @types/react v18.0.0.

[aschick82]

I upgraded react and @types/react packages to the new v18.0.0 yesterday and I started to get type errors in regards to the removed "children" prop in @types/react version 18.0.0.

Can you please apply a fix for this?

Thanks

[casperOne]

Can confirm, this is definitely happening for the Overlay component at a minimum.

[bradchristensen]

I'm also seeing this type error on tooltips from Popover2. Here's some guidance from the React team on how to fix: https://twitter.com/dan_abramov/status/1512833611401150474

[adidahiya]

Ok, thanks for the flag. The solution seems to be that we have to manually declare children as a prop anywhere we use React.FC: https://stackoverflow.com/questions/71788254/react-18-typescript-children-fc/71809927#71809927

Rationale on why they removed the children property in @types/react here: https://solverfox.dev/writing/no-implicit-children/

I'll get to this eventually, but gladly open to PRs in the meantime...

Edit: here's a Blueprint code sandbox using React 18, useful for testing which components get type errors.

[Reed-Anderson]

Does anyone have a reasonable workaround for this? This is preventing my update to React 18.

[casperOne]

Does anyone have a reasonable workaround for this? This is preventing my update to React 18.

Unfortunately, the only current solution as of this post is to not update @types/react to version 18.

[bradchristensen]

Thanks for the very quick fix @adidahiya!

EDIT: I noticed this was still an issue on class components, so I've opened a PR that addresses one such issue for Popover2/Tooltip2: #5261

[stevestorey]

Not sure whether this is part of this bug, or is expected, or should be something else - but if I add an example use of Tabs which spreads an existing props object, and then overrides specific properties, so something like:

// The real code is a functional component that wrap the
// standard Tabs component, and so accepts incoming props
// to be spread onto the wrapped Tabs component
const tabsProps: TabsProps = {
  animate: true,
  id: "test"
};
export const TabsExample: React.FC = () => {
  return (
    <Tabs {...tabsProps} animate={true}>
      {tabChilren}
    </Tabs>
  );
};

(added to the sample sandbox above here: https://codesandbox.io/s/blueprint-sandbox-with-react-18-tabs-example-dvnk04?file=/src/TabsExample.tsx:179-494 )

then I get a compile error:

Type '{ children: Element[]; animate: true; defaultSelectedTabId?: TabId | undefined; id: TabId; large?: boolean | undefined; renderActiveTabPanelOnly?: boolean | undefined; selectedTabId?: TabId | undefined; vertical?: boolean | undefined; onChange?(newTabId: TabId, prevTabId: TabId | undefined, event: MouseEvent<...>): ...' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Tabs> & Pick<Readonly<ITabsProps>, never> & Partial<...> & Partial<...>'.
  Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Tabs> & Pick<Readonly<ITabsProps>, never> & Partial<...> & Partial<...>'.ts(2322)

Oddly (to me at least!), I can persuade the compiler to accept it by wrapping the spread again:

    <Tabs {...{...tabsProps, animate: false}}>
      {tabChilren}
    </Tabs>

so it looks like it's that it won't handle any override properties in the tag syntax.

EDIT: I wonder if the fix is to add children?: ReactNode to the ITabsProps ?
EDIT2: And also to all other components that do accept child elements, e.g. FormGroupProps as this fails with essentially the same compile error but without the spread, so i think it affects every Blueprint component that allows children (regardless of whether it's implemented as an FC or not):

                        <FormGroup label="Login" inline={true}>
                          <InputGroup name="login" defaultValue="login" />
                        </FormGroup>

[SLKarol]

Can confirm, this is definitely happening for the Collapse, FormGroup components.

[switz]

This is still happening for the Spinner component as well:

'Spinner' cannot be used as a JSX component.
  Its instance type 'Spinner' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'ReactElement<{ className: string; role: string; }, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
        Property 'children' is missing in type 'ReactElement<{ className: string; role: string; }, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.ts(2786)
[index.d.ts(181, 9): ]()'children' is declared here.

[jseparovic]

also Column from @blueprintjs/table

[branko-d]

Also in the Select.ofType<U>().

[switz]

Still seeing an error on the Spinner component:

Type error: 'Spinner' cannot be used as a JSX component.
  Its instance type 'Spinner' is not a valid JSX element.

  143 |       {isLoading && (
  144 |         <Box>
> 145 |           <Spinner />
      |            ^
  146 |         </Box>
  147 |       )}
info  - Checking validity of types .⏎

[adidahiya]

I created a new Blueprint sandbox with React 18, check it out: https://codesandbox.io/s/blueprint-with-react-18-2wfvt5?file=/src/CoreExample.tsx

@switz I don't see any errors when using <Spinner /> in that sandbox. Your issue seems unrelated, and probably due to some other tooling or types you're using.

[puthrayaharness]

I am seeing something similar. -

../../node_modules/@blueprintjs/core/src/components/overlay/overlay.tsx:366:21 - error TS2349: This expression is not callable.
  No constituent of type 'ReactNode & Function' is callable.

366             child = child();
                        ~~~~~


Found 1 error in ../../node_modules/@blueprintjs/core/src/components/overlay/overlay.tsx:366

Not sure how I can fix this error.

[adidahiya]

@puthrayaharness can you please file a new issue? it should be possible to create a code sandbox repro for that kind of compile error.