react-bootstrap-icons
react-bootstrap-icons copied to clipboard
Issue <Icons /> cannot be used as a JSX component.
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?
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.
hi @ducqhl, thanks for reporting this issue. I'll update soon to fix it.
@ducqhl this should be fixed with React 18.2.0 and @types/react 18.0.12
i got this error even in react 17 @ismamz
├── [email protected]
├── [email protected]
├── [email protected]
├── @types/[email protected]
+1 I also get this issue in React 17
@dzpt @dantabel could you provide me a CodeSandbox example to reproduce this issue?