Nothing appear when I use import "flowbite"

[odurgeau]

Hello,

I try to use flowbite with a ruby on rails project, 6.0.1, and tailwind 2.2.19 and webpack.
But when I add this import nothing happens, I have no css and javascript into my pack generated files :

import "flowbite";

It works partialy if I specified this imports :

import "flowbite/dist/flowbite.css"
import "flowbite/dist/flowbite.js"

But I have a lot of css regression in my website. Flowbite seems included tailwind 3.0 :

/*
! tailwindcss v3.0.1 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

Found into the flowbite.css.

And reload some html item like input :

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

I know it works with this config, but I don't know with the import import "flowbite"; doesn't works !

Are you an idea, even little for me ?

[zoltanszogyenyi]

Hey @odurgeau,

I think you should first set up Tailwind CSS and then install Flowbite as a plugin.

Please check out these guides:

• Install Tailwind CSS
• Install Flowbite

You shouldn't directly import Flowbite's CSS, rather you should compile it yourself to purge all unnecessary classes.

Furthermore, keep in mind that we will release a new JavaScript next week under the v1.4.0 update where the components will be essential objects with parameters, methods, and you will even be able to use callback functions.

Until then, I think you could simply just import the CDN of the JavaScript.

[odurgeau]

Thx for your advice, I believe I will waiting the new release

[mobeetle]

import 'flowbite' does not work for me, import './node_modules/flowbite/dist/flowbite.js' etc. neither (v1.5.1).

I'm using the following workaround which works for me:

const importFlowbiteFunc = function(flowbitePathStr)
{
    const flowbiteScriptEl = document.createElement('script')
    flowbiteScriptEl.setAttribute(
        'src', flowbitePathStr
    )
    document.body.appendChild(flowbiteScriptEl)
}
importFlowbiteFunc('./node_modules/flowbite/dist/flowbite.js') // here goes your path to a local flowbite.js you want to import

[baazz20]

Thanks for the tip, it works great for me.
However I have this error in my console
modal.js:122 Uncaught TypeError: Cannot read properties of null (reading 'getAttribute') at modal.js:122:35 at NodeList.forEach (<anonymous>) at initModal (modal.js:119:54) at modal.js:156:2 at flowbite.js:3992:12

[nick-nds]

@mobeetle Thanks for the hack. For some reason, flowbite was importing before document load. I was able to use flow bite in the console, but it wasn't working on the website. Thanks, this helped me a lot.

[serbangv]

Can confirm using import 'flowbite' is not working (using create-react-app).

Importing the CSS via CDN works, or alternatively use import "flowbite/dist/flowbite.css"; in index.js

[mobeetle]

Hi,  I can't, since I'm using vanilla js. All the best, Lukáš On Aug 8, 2022 16:38, fromanother ***@***.***> wrote: Can confirm using import 'flowbite' is not working in (using create-react-app). Importing via CDN works. —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: ***@***.***>

[Lucasvo1]

Did anyone manage to import the flowbite.js in a next project? I tried adding it via next/script and via _app, but both do not seem to pick up the file.

[zoltanszogyenyi]

Hey peeps,

As of the latest v1.6.2 update and introducing TypeScript import flowbite; or import { Modal } from 'flowbite' and other similar imports should now work based on the quickstart guide.

Please try these solutions based on the new code base.

Cheers,
Zoltan

[peter-novak-m]

Hi @zoltanszogyenyi!

I would like to use the interactive Tailwind files in a NextJs project (instead of flowbite react), but when I try:
<Script src="./node_modules/flowbite/dist/flowbite.min.js" />

I get the following error in my console:
GET http://localhost:3000/node_modules/flowbite/dist/flowbite.min.js net::ERR_ABORTED 404 (Not Found)

Currently using 1.6.3 of flowbite. My tailwind config file is

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./node_modules/flowbite/**/*.js",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{ts,tsx}",
    "./public/**/*.html",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("flowbite/plugin")],
};

Do you know if it is possible to get the Tailwind version of the components to work in a Next Typescript project?

Cheers,
Peter

[Leg3nd]

I had a similar problem to this getting a 404 whilst using Flowbite on a Wordpress project using Underscore TW. My issue was in trying to add the script, the designated path was incorrect resulting in a 404.

[Pratik772846]

I am not able to use flowbite in react . While using Navbar component ,it is saying Navbar is not defined.Can someone help me?

[Haozhi415]

It keeps import the ts Navbar instead of the js one.

[hasan-juraev]

Hello,
I am also having a similar problem, every time I refresh or change the link, Flowbite components stop showing some features such as dropdown. I am using it in Laravel 10 Inertia Vue project. Please help me to solve my problem.

[stevenleeyongwah]

alot of problem with nextjs flowbite.. dropdown not working when dynamic rendering.. datepicker also not working... weird.... help anyone?

[MrFlip0815]

import 'flowbite'; Worked for me in SolidJS / TS - with Tailwind :)

[dodyagung]

in _app.tsx add this :

import { initFlowbite } from "flowbite";

export default function App({ Component, pageProps }: AppProps) {
   useEffect(() => {
      initFlowbite();
   }); // <--- no empty array on this

  return <Component {...pageProps} />
}

Edit :

Or in your every layout / component / page file. I prefer put this on layout.

import { initFlowbite } from "flowbite";

  useEffect(() => {
    initFlowbite();
  }, []); // <--- with empty array on this

[EgiPegi]

thank you, you are my savior. It works on react 18

[gunbileg2012]

thank you for my save days.

[brh55]

Unsure why this worked, but I initially followed the instructions on flowbite next.js instructions.
This wasn't working, despite the tailwind.css was rendering for non-flowbite components, but the flowbite react components weren't compiled in the CSS.

For some reason this set of directions worked for me: flowbite-react w/ nextjs instructions-> importing 'flowbite-react/tailwind' and using the content() and plugin() methods in my tailwind config, which works for both server side and client side components.