flowbite: flowbite not working with NextJS

Issue

We have installed flowbite to our react project by following recommended steps via npm. We added it to tailwind config etc
The code is just not working properly. The effects (e.g. tooltip) do not show on hover. If we try to import it directly (via import '@themesberg/flowbite'; we get an error document not found.
Is it correct to inject the script just with <script src="../path/to/@themesberg/flowbite/dist/flowbite.bundle.js"></script>? Is the path/to just a placeholder for another custom local path?
We are using NextJS. I think the issue could be related to SSR but I am not sure. Any pointers?

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 76 (18 by maintainers)

Commits related to this issue

fix: https://github.com/themesberg/flowbite/issues/51#issuecomment-1666715704 — committed to megmogmog1965/vulnerable-web-site by megmogmog1965 5 months ago

Most upvoted comments

I found a workaround guys! Next.js has a Script tag that allows you to import scripts.

What I did was added this to my _app.tsx/js file:

import Script from 'next/script';

<Script
  src="https://unpkg.com/flowbite@1.3.3/dist/flowbite.js"
  strategy="beforeInteractive"
/>

After that I added this

<link rel="stylesheet" href="https://unpkg.com/flowbite@1.3.3/dist/flowbite.min.css" />

to the built in Next.js <Head> tag.

Once I did that plus add require('flowbite/plugin') to the tailwind.config.js it worked!

+13

adriandelgg on Feb 10, 2022

Hello guys, I started a while ago implementing a React library that contains all Flowbite components which will be SSR friendly and uses hooks instead of the vanilla Javascript logic. It is still in progress but if you want to give a hand all contributions are welcome 😄

+10

bacali95 on Mar 12, 2022

I got the same problem right now! I’ll try to fix it.

+10

stefanovolpatti on Dec 23, 2021

If someone is still wondering how to make it work on latest Typescript project without flowbite-react components.

"flowbite": "^1.6.3"
"next": "13.1.6"

It worked for me, I had to follow these steps

In this case, you can go forward with just only base flowbite library.

$ npm install flowbite

Modify your global.css file

@tailwind base;
@tailwind components;
@tailwind utilities;

Add path to flowbite module on tailwind.config.js, something like this :

module.exports = {
  content: [
    "./node_modules/flowbite/**/*.js",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require("flowbite/plugin")
  ],
}

Import flowbite library using ESModule import style statement on your _app.tsx file

import 'flowbite';

Then, try to put any component (e.g. Navbar) to see if it’s work.

PS: Sorry, I had to comment on this closed issue. It seems using native HTML syntax (base flowbite) is more suitable for me, especially with highly customize support. Actually, there is react component-ready library (flowbite-react) as a concern from other previous comments here.

satrio-pamungkas on Mar 9, 2023

Hey I don’t know if it helps you people, but I actually got a workaround on this… I’m still working on it but I got some javascript actions working with those lines.

on your _app.js add:

useEffect(() => {
    import('@themesberg/flowbite')
  }, [])

flowbite-nextjs

bragamat on Jan 15, 2022

Looks like this is a NextJS specific problem. I’ll look into it better next week.

If you anyone finds a workaround, or more info on this, let me know.

zoltanszogyenyi on Jan 7, 2022

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

dodyagung on Aug 6, 2023

Hey I don’t know if it helps you people, but I actually got a workaround on this… I’m still working on it but I got some javascript actions working with those lines.

on your _app.js add:
useEffect(() => {
    import('@themesberg/flowbite')
  }, [])

It’s working for me

"next": "10.1.3"
"react": "16.12.0"

I add on my _app.js:

useEffect(() => {
    import('flowbite')
}, [])

thiendang on Sep 16, 2022

Hello, everyone!

Please check out the official React library for Flowbite: https://github.com/themesberg/flowbite-react

We’re close to a stable release. This should work with Next JS.

zoltanszogyenyi on May 19, 2022

I’ll just give this a +1. Utilizing NextJS 12 and receiving this exact error when attempting to utilize.

Rykuno on Jan 10, 2022

@volp99 feel free to also fork the project as you may need to update the JS from Flowbite.

The main issue is with the event listeners not being registered as React uses a virtual DOM and the Flowbite script looks for those data attributes.

The other non-interactive elements should work regardless.

zoltanszogyenyi on Dec 23, 2021

Hey everyone,

Lots of +1’s 😃

If you’re using the data attributes by copy-pasting the examples for the main docs then I advise you to either use the useEffect hook or the onMounted lifecycle method and initialise the components that you need.

Here’s an example documented for Nuxt which we will also later update for Next.js:

https://flowbite.com/docs/getting-started/nuxt-js/#data-attributes

Something like this:

import { onMounted } from 'vue' // react / nextjs instead of vue
import { initModals } from 'flowbite'

// initialize components based on data attribute selectors
onMounted(() => { // this can be the React lifecycle method or useEffect
    initModals();
})

Additionally, if you’re using Flowbite React please refer to that repository, there should be no problems with Next.js < 13 and for Next.js above 13 just use the use client; code at the beginning of the page.

Cheers, Zoltan

zoltanszogyenyi on Feb 14, 2023

Now, it’s been a month but the issue has not been solved yet.

iamhimanshusrivastava on Jan 24, 2022

Hey I don’t know if it helps you people, but I actually got a workaround on this… I’m still working on it but I got some javascript actions working with those lines.

on your _app.js add:
useEffect(() => {
    import('@themesberg/flowbite')
  }, [])

@bragamat Thanks for looking into this! This solution still doesnt work for me (e.g. the tooltip just does not appear on hover).

fxmb on Jan 15, 2022

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

I’m working on a nextjs project. This solution works for me

medardm on Nov 23, 2023

Thank you for your response, @adriandelgg !! To clarify, is it necessary to use Next.js built-in upper case Script instead of just normal lower case script, isn’t it?? I am going to try that one.

hiroshinishio on Feb 22, 2022

Anybody can help me?? I am still struggling with this issue. I use Windows and VSCode. Installed libraries are followings ;

“next”: “^12.1.0”,
“react”: “17.0.2”,
“@themesberg/tailwind-datepicker”: “^1.1.0”,
“flowbite”: “^1.3.3”,
“tailwindcss”: “^3.0.19”,

Then I tried followings ;

Created _document.tsx like this.

import Document, {
  Html,
  Head,
  Main,
  NextScript,
  DocumentContext,
} from "next/document";

class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const initialProps = await Document.getInitialProps(ctx);

    return initialProps;
  }

  render() {
    return (
      <Html>
        <Head>
          <link
            rel="stylesheet"
            // href="https://unpkg.com/flowbite@1.3.3/dist/flowbite.min.css"
            href="https://unpkg.com/@themesberg/flowbite@1.3.3/dist/flowbite.min.css"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
          {/* <script src="https://unpkg.com/flowbite@1.3.3/dist/flowbite.js"></script> */}
          {/* eslint-disable-next-line @next/next/no-sync-scripts */}
          <script src="https://unpkg.com/@themesberg/flowbite@1.3.0/dist/flowbite.bundle.js" />
          {/* eslint-disable-next-line @next/next/no-sync-scripts */}
          <script src="https://unpkg.com/@themesberg/flowbite@1.3.0/dist/datepicker.bundle.js" />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Modified tailiwind.config.js like this

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './node_modules/flowbite/**/*.js',
    './node_modules/@themesberg/flowbite/*/.js',
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('flowbite/plugin')
  ],
}

Finally created a component to display datepicker like this ;

// import "flowbite";
// import Datepicker from '@themesberg/tailwind-datepicker/Datepicker';
// import DateRangePicker from "@themesberg/tailwind-datepicker/DateRangePicker";
import { useEffect } from "react";

const SpecifyPeriodFromTo = () => {

  useEffect(() => {
    import("flowbite");
  }, []);

  return (
    <div className="flex px-3 py-1 mx-2 my-1 items-center">
        <input
          datepicker
          type="text"
          className="bg-white text-gray-700 border border-gray-300 rounded-lg block w-44 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 px-2 py-1 pl-10"
          placeholder="Select date start"
        />
    </div>
  );
};

export default SpecifyPeriodFromTo;

But unfortunately it didn’t work, which means datepicker didn’t show up.

hiroshinishio on Feb 20, 2022

We are aware of the problem and the best solution is to create a standalone React component library based on Flowbite, which we will shortly get started with right after shipping an update for the Flowbite website.

We’ll create contribution guidelines so anybody who would like to offer help, can do so.

Until then, there’s a temporary solution that can be used found by “@branko” from our Discord server:

https://discord.com/channels/902911619032576090/933850573999075398/934011104173113375

Here’s an extract of the text:

"ok so I did the following:

in tailwind config: in content i added:

'./node_modules/@themesberg/flowbite/**/*.js' and './node_modules/@themesberg/flowbite/*/.js' and in plugins i added require('@themesberg/flowbite/plugin')

in my index.tsx i added import('@themesberg/flowbite'); inside a useEffect() with an empty dependency array

in _document.tsx in Head i added

<link
            rel='stylesheet'
            href='https://unpkg.com/@themesberg/flowbite@1.3.0/dist/flowbite.min.css'
          />
 and at the end of body   after <NextScript /> i added 
{/* eslint-disable-next-line @next/next/no-sync-scripts */}
          <script src='https://unpkg.com/@themesberg/flowbite@1.3.0/dist/flowbite.bundle.js' />
          {/* eslint-disable-next-line @next/next/no-sync-scripts */}
          <script src='https://unpkg.com/@themesberg/flowbite@1.3.0/dist/datepicker.bundle.js' />

i’m sure some of these aren’t actually needed since i’m importing the CDN, but I was hitting my head against the wall still looking for a better solution for NextJS"

Sorry for the inconvenience, we are doing our best to provide support to all major front-end frameworks and libraries. I hope that this temporary solution is helpful enough until we launch the official library.

zoltanszogyenyi on Jan 24, 2022

@volp99 Would be amazing if you could let me know in case you find a solution or other workaround 😃

fxmb on Jan 7, 2022

Thanks for your reply,

I follow the steps as described above but I always get the same error. I try also to install again all the dependencies but nothing.

I’m going to find another way!

stefanovolpatti on Jan 6, 2022