Button can't be rendered as it's return type is ReactNode.

[DavideFrancescon]

• I have searched the Issues to see if this bug has already been reported
• I have tested the latest version

Steps to reproduce

1. Create a CRA,
2. Install flowbite react
3. Add a button to a page

Current behavior

TS2786: 'Button' cannot be used as a JSX component.
  Its return type 'ReactNode' is not a valid JSX element.
    Type 'undefined' is not assignable to type 'Element | null'.

Expected behavior

To normally render a Button

Workaround

CTRL/CMD+click on Button component will bring you to the .d file, there change the last NodeElement into JSX.Element. After this restart the server

I might fix this bug myself when i have 10 free minutes if noone picks this up before me

[PadowYT2]

What React version are you using?

[DavideFrancescon]

What React version are you using?

"react": "^18.2.0"

I think the issue is caused by this, but the fix is really fast, just need to change the component return type to JSX.Element

[PadowYT2]

What React version are you using?

"react": "^18.2.0"

I think the issue is caused by this, but the fix is really fast, just need to change the component return type to JSX.Element

Well if you can change it within your project and it works, go for it, but what about @types/react?

[congon4tor]

I'm facing this issue too.

'Button' cannot be used as a JSX component.
Its return type 'ReactNode' is not a valid JSX element.

This started happening when I updated to version 0.6.0

[mrjohnr]

Hi
I've created today a typescript+react template
npx create-react-app my-app --template typescript

then followed steps from there https://www.flowbite-react.com/docs/getting-started/introduction I've installed latest version of flowbite-react (0.7.3)

I've put a button on my app

import { Button } from 'flowbite-react';

export default function MyPage() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}

and got

TS2786: 'Button' cannot be used as a JSX component.
  Its return type 'ReactNode' is not a valid JSX element.
    Type 'undefined' is not assignable to type 'Element | null'.

thanks for any help

[SutuSebastian]

Looking into it, will push and release a fix ASAP.

[rnicholus]

Note that this also affects Dropdown.Item. Regression from #1244.

#1244 (comment)

[fbt0wizard]

JSX.Element

Yeah Dropdown.Item is broken as well in v0.7.3

[fbt0wizard]

The DropDown.Item is not yet fixed, after making modification on my pc changing ReactNode to JSX.Element i can then build on my pc but using GitHub actions or any pipeline is impossible unless its fixed on the npm server, i hope the administrators can do something about this.

[rnicholus]

Looks like this library is going to be broken for a while (based on code freeze announcement and the length of time the fix PR has been sitting).

In the meantime, everyone will have to ts-ignore the TS issues to get their build passing 😞

[SutuSebastian]

After some tests, if people are on typescript 5.x and above, they should be fine.

[rnicholus]

I'm not seeing that. On TypeScript 5.4 and the issue persists.

[SutuSebastian]

I got a dirty solution, until we get it properly working and/or refactor the polymorphic forwarded ref component. Stay tuned.

[SutuSebastian]

Fixed by v0.7.5 release.

[w-bt]

Hi team I still facing the same issue after upgrade it to v0.7.5

This is my code:

export const TOC = (props: Props) => {
    const { show, onClose } = props;

    return (
        <Modal show={show} onClose={() => onClose()}>
            <Modal.Header>Terms of Conditions</Modal.Header>
            <Modal.Body>
                <div className="space-y-6">
                    some toc
                </div>
            </Modal.Body>
            <Modal.Footer>
                <Button>I accept</Button>
                <Button color="gray">
                    Decline
                </Button>
            </Modal.Footer>
        </Modal>
    )
}

this is my dependencies in package.json:

"dependencies": {
    "@reduxjs/toolkit": "^2.2.1",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.89",
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "axios": "^1.6.8",
    "flowbite": "^2.3.0",
    "flowbite-react": "^0.7.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^9.1.0",
    "react-router-dom": "^6.22.3",
    "react-scripts": "^5.0.1",
    "sweetalert2": "^11.6.13",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  }

and in node_modules, flowbite-react already change to 0.7.5

anyone facing the same issue after upgrading?

[SutuSebastian]

Hi team I still facing the same issue after upgrade it to v0.7.5

This is my code:

export const TOC = (props: Props) => {
    const { show, onClose } = props;

    return (
        <Modal show={show} onClose={() => onClose()}>
            <Modal.Header>Terms of Conditions</Modal.Header>
            <Modal.Body>
                <div className="space-y-6">
                    some toc
                </div>
            </Modal.Body>
            <Modal.Footer>
                <Button>I accept</Button>
                <Button color="gray">
                    Decline
                </Button>
            </Modal.Footer>
        </Modal>
    )
}

this is my dependencies in package.json:

"dependencies": {
    "@reduxjs/toolkit": "^2.2.1",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.89",
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "axios": "^1.6.8",
    "flowbite": "^2.3.0",
    "flowbite-react": "^0.7.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^9.1.0",
    "react-router-dom": "^6.22.3",
    "react-scripts": "^5.0.1",
    "sweetalert2": "^11.6.13",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  }

and in node_modules, flowbite-react already change to 0.7.5

anyone facing the same issue after upgrading?

Make sure to reload ur VSCode, or at least the TS server.

[w-bt]

awesome, it works for me after I restart my VSCode