themesberg / themesberg/flowbite

Flowbite not working on chromium based browsers.

Open
#509 9 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
HTML
Stars
9.4k
Forks
862
PR merge metrics
No merged PRs in 30d

Description

Describe the bug
Flowbite components (modals,dropdown) not working on chromium based browsers.

To Reproduce
Steps to reproduce the behavior:

  1. Setup a react project using official flowbite react setup [Using vite]
  2. make modal and dropdown components.
  3. deploy the app
  4. Modals and dropdown works on Firefox, but in Chromium it stays unresponsive(nothing happens)

Expected behavior
Should be able to interact with flowbite's components (dropdown,modal)

App Setup Screenshots
Screenshot from 2023-03-28 11-37-07
Screenshot from 2023-03-28 11-36-19
Screenshot from 2023-03-28 11-36-06

Desktop (please complete the following information):

  • OS: Linux
  • Browser Chromium and Firefox
  • Version Chromium Version 111.0.5563.64 and Firefox Version 111.0

Additional context
By default flowbite's components (modals,dropdown) don't work on Firefox. To make it work on Firefox either we needed to add a import 'flowbite' statement under main.jsx (screenshot attached) or add script tag of the flowbite.js file in index.html (screenshot attached).

In tailwind.config.cjs - flowbite/plugin show this

module "/somepath/somepath/Projects/ssh-frontend/node_modules/flowbite/plugin"
Could not find a declaration file for module 'flowbite/plugin'. '/somepath/somepath/Projects/ssh-frontend/node_modules/flowbite/plugin.js' implicitly has an 'any' type.
  If the 'flowbite' package actually exposes this module, try adding a new declaration (.d.ts) file containing `declare module 'flowbite/plugin';`ts(7016)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the official Flowbite React setup with Vite, focusing on the modal and dropdown behavior in Chromium and Firefox. Inspect main.jsx, index.html, and tailwind.config.cjs, including the reported flowbite/plugin declaration warning. Done means the components respond in Chromium without requiring an extra import or script workaround.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, tailwindcss, vite
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.