Issue <Icons /> cannot be used as a JSX component.

[ducqhl]

Issue details:

TS2786: 'Gear' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<Props, any, any> | null' is not a valid JSX element.
    Type 'Component<Props, any, any>' is not assignable to type 'Element | ElementClass | null'.
      Type 'Component<Props, any, any>' is not assignable to type 'ElementClass'.
        The types returned by 'render()' are incompatible between these types.
          Type 'React.ReactNode' is not assignable to type 'import("/Users/ducqhle/Documents/_workspace/my-practices/sbox-internal-app/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'.
            Type '{}' is not assignable to type 'ReactNode'.
              Type '{}' is missing the following properties from type 'ReactPortal': key, children, type, props
    25 |           <Col xs={1}>
    26 |             <Stack gap={3}>
  > 27 |               <Gear size={18} />
       |                ^^^^
    28 |               <PeopleFill size={18} />
    29 |               <CheckCircle size={18} />
    30 |             </Stack>

Versions:
"react-bootstrap-icons": "^1.8.2",
"react-bootstrap": "^2.4.0",
"react": "18.0.0",

Can anyone know how can we fix this issue when integrate react-bootstrap-icons with typescript React project?

[nickives]

I'm having this issue since upgrading to React 18. I think the problem is that {} used to be a valid ReactNode, but they fixed it in React 18. So, I assume the type of Icon in react-bootstrap-icons needs to be updated.

[ismamz]

hi @ducqhl, thanks for reporting this issue. I'll update soon to fix it.

[ismamz]

@ducqhl this should be fixed with React 18.2.0 and @types/react 18.0.12

[dzpt]

i got this error even in react 17
@ismamz

├── [email protected]
├── [email protected]
├── [email protected]
├── @types/[email protected]

[dantabel]

+1 I also get this issue in React 17

[ismamz]

@dzpt @dantabel could you provide me a CodeSandbox example to reproduce this issue?