Import from 'flowbite-react' invalid hook call error

Describe the bug When I import a component directly from flowbite-react such as the following:

import { Badge } from 'flowbite-react';

I receive an Invalid hook call error in the console and the page will not load.

However, if I run the following import, it works just fine:

import { Badge } from 'flowbite-react/lib/cjs/components/Badge';

Based on other examples I have seen, I don’t believe this is the intended use.

To Reproduce

• Create a vite project with the react-ts template
• Follow Flowbite/Flowbite-React quickstart guide for installation and configuration (installing the modules, updating `tailwind.config.js)
• Import a component like mentioned above
• Open up browser dev tools and verify the error

Expected behavior Import the component without errors

Screenshots

System information:

• Device: PC
• Resolution: 1920x1080
• OS: Windows 11
• Browser: Edge
• Version: v106.0.1370.42

Project information:

• React / React-Dom: 18.2.0
• Tailwind: 3.1.8
• Flowbite: 1.5.3
• Flowbite React: 0.2.0
• Type: Vite, Turborepo

Additional Context I have attempted to import in multiple functional components from both a shared package and frontend app within my Turborepo project. Something as basic as:

import React from 'react';
import { Badge } from 'flowbite-react'; // this causes the invalid hook call error
// import { Badge } from 'flowbite-react/lib/cjs/components/Badge'; // this way works just fine

const TestComponent = () => {
  return (
    <>
      <Badge color='info'>Default</Badge>
    </>
  );
}

export default TestComponent;

[rluders]

I’m not seeing this part of the configuration in your project:

Nevermind, found it.

module.exports = {
    content: [
         'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}'
    ]
}

[rluders]

Well, it seems that it is not a flowbite-react bug… It is probably something specific from TurboRepo usage, but I never used it so I don’t know how to help.