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

See original GitHub issue

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?

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:1
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
dantabelcommented, Sep 7, 2022

+1 I also get this issue in React 17

1reaction
dzptcommented, Sep 1, 2022

i got this error even in react 17 @ismamz

├── react-bootstrap-icons@1.8.4
├── react-bootstrap@2.5.0
├── react@17.0.2
├── @types/react@17.0.48
Read more comments on GitHub >

github_iconTop Results From Across the Web

'XXX' cannot be used as a JSX component. Its instance type ...
When I upgraded to react18,my icon component reported an error.Such as: 'MaterialCommunityIcons' cannot be used as a JSX component. Its ...
Read more >
Component cannot be used as a JSX component. Its return ...
In case anyone is facing issue with React + Typescript stack, try adding below setting in tsconfig.json. It worked for me.
Read more >
Component cannot be used as a JSX component in React
The error Component cannot be used as a JSX component occurs for multiple reasons, returning an array of JSX elements instead of a...
Read more >
ts2786: 'view' cannot be used as a jsx component. its instance ...
TS2786 : 'View' cannot be used as a JSX component. Its instance type 'View' is not a valid JSX element. The types returned...
Read more >
'SVG' cannot be used as a JSX component.
'SVG' cannot be used as a JSX component. hi team, I am facing the below issue while installing react version of metronic 8....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found