Code Monkey home page Code Monkey logo

Comments (76)

adriandelgg avatar adriandelgg commented on May 22, 2024 13

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/[email protected]/dist/flowbite.js"
  strategy="beforeInteractive"
/>

After that I added this

<link rel="stylesheet" href="https://unpkg.com/[email protected]/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!

from flowbite.

stefanovolpatti avatar stefanovolpatti commented on May 22, 2024 10

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

Schermata 2021-12-23 alle 13 49 16

.

from flowbite.

bacali95 avatar bacali95 commented on May 22, 2024 10

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 😄

from flowbite.

bragamat avatar bragamat commented on May 22, 2024 9

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

from flowbite.

satrio-pamungkas avatar satrio-pamungkas commented on May 22, 2024 9

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.

from flowbite.

zoltanszogyenyi avatar zoltanszogyenyi commented on May 22, 2024 8

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.

from flowbite.

dodyagung avatar dodyagung commented on May 22, 2024 5

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

from flowbite.

Rykuno avatar Rykuno commented on May 22, 2024 4

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

from flowbite.

zoltanszogyenyi avatar zoltanszogyenyi commented on May 22, 2024 4

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.

from flowbite.

thiendang avatar thiendang commented on May 22, 2024 4

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 flowbite-nextjs

It's working for me

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

I add on my _app.js:

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

from flowbite.

zoltanszogyenyi avatar zoltanszogyenyi commented on May 22, 2024 3

@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.

from flowbite.

fxmb avatar fxmb commented on May 22, 2024 2

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 Thanks for looking into this! This solution still doesnt work for me (e.g. the tooltip just does not appear on hover).

from flowbite.

iamhimanshusrivastava avatar iamhimanshusrivastava commented on May 22, 2024 2

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

from flowbite.

zoltanszogyenyi avatar zoltanszogyenyi commented on May 22, 2024 2

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

from flowbite.

stefanovolpatti avatar stefanovolpatti commented on May 22, 2024 1

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!

from flowbite.

fxmb avatar fxmb commented on May 22, 2024 1

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

from flowbite.

zoltanszogyenyi avatar zoltanszogyenyi commented on May 22, 2024 1

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/[email protected]/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/[email protected]/dist/flowbite.bundle.js' />
          {/* eslint-disable-next-line @next/next/no-sync-scripts */}
          <script src='https://unpkg.com/@themesberg/[email protected]/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.

from flowbite.

hiroshinishio avatar hiroshinishio commented on May 22, 2024 1

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 ;

  1. 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/[email protected]/dist/flowbite.min.css"
            href="https://unpkg.com/@themesberg/[email protected]/dist/flowbite.min.css"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
          {/* <script src="https://unpkg.com/[email protected]/dist/flowbite.js"></script> */}
          {/* eslint-disable-next-line @next/next/no-sync-scripts */}
          <script src="https://unpkg.com/@themesberg/[email protected]/dist/flowbite.bundle.js" />
          {/* eslint-disable-next-line @next/next/no-sync-scripts */}
          <script src="https://unpkg.com/@themesberg/[email protected]/dist/datepicker.bundle.js" />
        </body>
      </Html>
    );
  }
}

export default MyDocument;
  1. 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')
  ],
}
  1. 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.

from flowbite.

hiroshinishio avatar hiroshinishio commented on May 22, 2024 1

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.

from flowbite.

medardm avatar medardm commented on May 22, 2024 1

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

from flowbite.

ozamamurzleen avatar ozamamurzleen commented on May 22, 2024

Same issue here followed all steps mentioned on their site. Using it via npm and nextjs/tailwind. Sometimes it works and sometimes when page reloads it start giving document not found error. I am using tooltip from flowbite. And importing import '@themesberg/flowbite' in _app.js. Is it the right place to import?

from flowbite.

fxmb avatar fxmb commented on May 22, 2024

@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 thanks for your reply. Is there a way to fix this without a (rather cumbersome) fork?

from flowbite.

zoltanszogyenyi avatar zoltanszogyenyi commented on May 22, 2024

Hey @franzbewerunge,

One way to work with Flowbite with React/Vue would be to include only the Tailwind CSS plugin and code the interactive behaviour yourself or with the help of an external library.

We will create a project on Github for React and Vue and we'll start building the components with the community. ETA is probably a few months.

from flowbite.

zoltanszogyenyi avatar zoltanszogyenyi commented on May 22, 2024

Hey everyone,

Please update Flowbite to v1.3.0 and check out whether it works for Next JS or not.

We've tested it for React and Vue.js and it works (it didn't work before).

Thanks!

from flowbite.

stefanovolpatti avatar stefanovolpatti commented on May 22, 2024

Hello @zoltanszogyenyi !
I update Flowbite to v1.3.0 right now but unfortunately still not works for Next JS (same error: document is not defined)

if it can help, I'm using:

"next": "12.0.7",
"react": "17.0.2",
"typescript": "4.5.4",
"tailwindcss": "^3.0.7"

from flowbite.

zoltanszogyenyi avatar zoltanszogyenyi commented on May 22, 2024

Hello,

Try importing the JS as described here:

https://www.kindacode.com/article/how-to-correctly-use-bootstrap-5-in-next-js/

Let me know if it helps!

from flowbite.

zoltanszogyenyi avatar zoltanszogyenyi commented on May 22, 2024

@volp99 that is odd. I'll check it out with a fresh NextJS install the next few days. Please let me know if you've made progress.

from flowbite.

stefanovolpatti avatar stefanovolpatti commented on May 22, 2024

@zoltanszogyenyi of course and thank you!

from flowbite.

fxmb avatar fxmb commented on May 22, 2024

@zoltanszogyenyi I can confirm that it does not work for following config:

"next": "^12.0.3"
"react": "^17.0.2"
"tailwindcss": "^3.0.11",
"typescript": "^4.1.2"

Thanks for looking into this!
I updated flowbite to the latest version (1.3.0)

from flowbite.

bonesoul avatar bonesoul commented on May 22, 2024

same here with next 12

from flowbite.

bragamat avatar bragamat commented on May 22, 2024

Another (hideous) way to make this work would be adding the js directly on the an Script (https://nextjs.org/docs/basic-features/script#afterinteractive) tag.

so, for example, we would add this on the _app.js

import Script from 'next/script'
.
.
.

        <Script
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            const isSidebarExpanded = toggleSidebarEl => {
              return toggleSidebarEl.getAttribute('aria-expanded') === 'true' ? true : false;
          }

          const toggleSidebar = (sidebarEl, expand, setExpanded = false) => {
              const bottomMenuEl = document.querySelector('[sidebar-bottom-menu]');
              const mainContentEl = document.getElementById('main-content');
              if (expand) {
                  sidebarEl.classList.add('lg:w-64');
                  sidebarEl.classList.remove('lg:w-16');
                  mainContentEl.classList.add('lg:ml-64');
                  mai......|

from flowbite.

fxmb avatar fxmb commented on May 22, 2024

The problem does indeed not seem to be solved yet, unfortunately.

from flowbite.

lazarusking avatar lazarusking commented on May 22, 2024

@zoltanszogyenyi
A weird way got mine working was to copy the collapse.js code (since that was what I wanted) from the @themesberg folder into the _app.js file and add a useEffect function like this, so I'm guessing if you need the other functions you'd have to manually copy the code from themesberg/src folder

useEffect(() => {
    if (typeof document == "object") {
      console.log(typeof document, "printed")

      import("particles.js")     
    }
    // import('@themesberg/flowbite');

    const toggleCollapse = (elementId, show = true) => {
      const collapseEl = document.getElementById(elementId);
      if (show) {
        collapseEl.classList.remove('hidden');
      } else {
        collapseEl.classList.add('hidden');
      }
    }

    // Toggle target elements using [data-collapse-toggle]
    document.querySelectorAll('[data-collapse-toggle]').forEach(function (collapseToggleEl) {
      var collapseId = collapseToggleEl.getAttribute('data-collapse-toggle');

      collapseToggleEl.addEventListener('click', function () {
        toggleCollapse(collapseId, document.getElementById(collapseId).classList.contains('hidden'));
      });
    });

    window.toggleCollapse = toggleCollapse;

    return (console.log("Component unmounted!"))

    // import("@themesberg/flowbite/src/components/collapse")
  }, [<Component/>])

I tried importing flowbite in the typeof document if clause but it didn't work neither did importing it just in useEffect.

from flowbite.

shinokada avatar shinokada commented on May 22, 2024

This is not a solution, but the similar method may circumvent for NextJS.

I had the same problem with SvelteKit.
This is what I did.

  1. Adding CSS and JS in the app.html. Flowbite is for a frontend.
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="description" content="" />
		<link rel="icon" href="%svelte.assets%/favicon.png" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="stylesheet" href="https://unpkg.com/@themesberg/[email protected]/dist/flowbite.min.css" />
		%svelte.head%
	</head>
	<body>
		<div id="svelte">%svelte.body%</div>
		<script src="https://unpkg.com/@themesberg/[email protected]/dist/flowbite.bundle.js"></script>
	</body>
</html>

This worked ok, but all interactive features were not working.
I need to refresh the page to work.

  1. So I added rel="external" to links where I have interactive components.
    Adding a rel=external attribute to a link will trigger a browser navigation when the link is clicked.

I think NextJS must have a similar attribute.

I hope this will be helpful.

from flowbite.

adriandelgg avatar adriandelgg commented on May 22, 2024

Having this issue as well! Very frustrating

from flowbite.

rjvim avatar rjvim commented on May 22, 2024

Yep, this issue is not resolved. I am using NextJS with Turborepo, so, not sure what more issues it's going to introduce. Was excited to try out Flowbite.

from flowbite.

Siumauricio avatar Siumauricio commented on May 22, 2024

That works but there is an issue maybe with cache, the components after you change of route the JS-component interactive don't work anymore, just works after you reload the browser.

from flowbite.

adriandelgg avatar adriandelgg commented on May 22, 2024

@hiroshinishio

Use the built-in Script tag offered by Next.js.

https://nextjs.org/docs/api-reference/next/script

from flowbite.

hiroshinishio avatar hiroshinishio commented on May 22, 2024

Hi @adriandelgg , unfortunately it didn't work...
All I changed are ;

  • Replaced 3 script tags into Script tags
  • Added import Script from "next/script";
  • Added 3 strategy params in Script tags but without this, it did not work as well.

Just in case, I pasted modified code below ;

{/* eslint-disable-next-line @next/next/no-document-import-in-page */}
import Document, {
  Html,
  Head,
  Main,
  NextScript,
  DocumentContext,
} from "next/document";
{/* eslint-disable-next-line @next/next/no-script-in-document */}
import Script from "next/script";

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/[email protected]/dist/flowbite.min.css"
          />
          <link
            rel="stylesheet"
            href="https://unpkg.com/@themesberg/[email protected]/dist/flowbite.min.css"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
          {/* eslint-disable-next-line @next/next/no-sync-scripts */}
          <Script
            src="https://unpkg.com/[email protected]/dist/flowbite.js"
            strategy="beforeInteractive"
          />
          {/* eslint-disable-next-line @next/next/no-sync-scripts */}
          <Script
            src="https://unpkg.com/@themesberg/[email protected]/dist/flowbite.bundle.js"
            strategy="beforeInteractive"
          />
          {/* eslint-disable-next-line @next/next/no-sync-scripts */}
          <Script
            src="https://unpkg.com/@themesberg/[email protected]/dist/datepicker.bundle.js"
            strategy="beforeInteractive"
          />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

from flowbite.

stefanovolpatti avatar stefanovolpatti commented on May 22, 2024

Hey @hiroshinishio
Have you tried with this solution? #51 (comment)

from flowbite.

hiroshinishio avatar hiroshinishio commented on May 22, 2024

@volp99
Yes, I tried the method above (#51 (comment)), but it didn't work as well.

from flowbite.

martindavid avatar martindavid commented on May 22, 2024

I've tried all of the above workarounds and still can't get the library to work with nextjs. Will be really helpful if there's a guide for this. I really like this library.

from flowbite.

ivanjeremic avatar ivanjeremic commented on May 22, 2024

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.

This is not a Nextjs problem, you offer flowbite React so this codebase needs to be rewritten to support SSR & CSR at the same time.

from flowbite.

zoltanszogyenyi avatar zoltanszogyenyi commented on May 22, 2024

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 😄

Thanks, @bacali95.

We'll probably use this as the official library at some point, depending on how the development goes.

from flowbite.

teddybee avatar teddybee commented on May 22, 2024

Unforunately the solution of @adriandelgg is not working for me with Nextjs 12.1

ReferenceError: window is not defined

from flowbite.

rotcl avatar rotcl commented on May 22, 2024

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 😄

Hey buddy, any chance to get included as contributor? I've been trying to replicate some of the components of the main frostbite repo, and I guess I can help during the process.

from flowbite.

sgehrman avatar sgehrman commented on May 22, 2024

same issue

from flowbite.

xiaolin911211 avatar xiaolin911211 commented on May 22, 2024

still no resolutions? None of tailwind css library is working for NextJS

from flowbite.

ivanjeremic avatar ivanjeremic commented on May 22, 2024

still no resolutions? None of tailwind css library is working for NextJS

Honestly use Tailwind with something else this will not work ever.

from flowbite.

xiaolin911211 avatar xiaolin911211 commented on May 22, 2024

Agree, started using daisyui that’s compatible with NextJS

from flowbite.

xiaolin911211 avatar xiaolin911211 commented on May 22, 2024

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.

Tried still getting the same errror document not found

from flowbite.

zoltanszogyenyi avatar zoltanszogyenyi commented on May 22, 2024

@xiaolin911211 can you please open an issue on that repo with the document not found error? I believe that has been addressed since the vanilla Flowbite JS is no longer being included.

from flowbite.

Siumauricio avatar Siumauricio commented on May 22, 2024

https://github.com/themesberg/flowbite/blob/main/src/components/dropdown.js#L104 this is one of the problems accesing a document object when nextjs is on SSR, one of the temporal solutions could be checking if are on server

   if (typeof window !== 'undefined') {
  //do stuff related with dom
}

from flowbite.

xiaolin911211 avatar xiaolin911211 commented on May 22, 2024

Getting this error now:
SyntaxError: Unexpected token 'export'
With the following codes that i follow in https://github.com/themesberg/flowbite-react.

tailwind.config.js
module.exports = {
content: [
"./src/**/*.{html,js,svelte,ts}",

"./pages/**/*.{js,ts,jsx,tsx}",

"./components/**/*.{js,ts,jsx,tsx}",

],
theme: {
extend: {},
},
plugins: [require('flowbite/plugin')],
}

_app.js

import Modal from "flowbite/src/components/modal";

const MyApp = ({Component, pageProps}) => {

return (
    <>

        <Modal>

        </Modal>
    </>
);

}
export default MyApp

from flowbite.

bacali95 avatar bacali95 commented on May 22, 2024

Hi @xiaolin911211 I think the import statement should be more like

import {Modal} from 'flowbite-react`;

from flowbite.

xiaolin911211 avatar xiaolin911211 commented on May 22, 2024

What happened to the Nextjs starter kit? It was created weeks ago but now i couldnt find it anymore

from flowbite.

zoltanszogyenyi avatar zoltanszogyenyi commented on May 22, 2024

Hey @xiaolin911211,

Please check out this repository: https://github.com/tulupinc/flowbite-next-starter

We'll later add this to be main library as an integration guide.

from flowbite.

santyas avatar santyas commented on May 22, 2024

How do you add className to a component? Example <Accordion.Title className="bg-black">

from flowbite.

idperez avatar idperez commented on May 22, 2024

Seeing success using Next dynamic imports:
Using Next 12.2.4

In my _app.js

import dynamic from 'next/dynamic';

dynamic(
  () => import('flowbite'),
  { ssr: false },
);

In an app file:

import dynamic from 'next/dynamic';

const Alert = dynamic(
  () => import('flowbite-react').then((o) => o.Alert),
  { ssr: false },
);

from flowbite.

sgehrman avatar sgehrman commented on May 22, 2024 
"flowbite-react": "^0.1.5",

still happens. what is the solution?

from flowbite.

xiaolin911211 avatar xiaolin911211 commented on May 22, 2024

Do we have a solution for flowbite with NextJS yet? alot of the component it does not work still.

from flowbite.

crypt096 avatar crypt096 commented on May 22, 2024

Still not working...

from flowbite.

crypt096 avatar crypt096 commented on May 22, 2024

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

What about TypeScript since this one is throwing an error?

from flowbite.

bacali95 avatar bacali95 commented on May 22, 2024

I have to say that using the react library of flowbite flowbite-react you don't need to import the main js library (just the style import is needed) because most of the js logic is already implemented using react api(modal, carousel,...etc)

from flowbite.

anshumanfs avatar anshumanfs commented on May 22, 2024

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

What about TypeScript since this one is throwing an error?

use the Next page component on each file you are using

import type { NextPage } from "next"

and extend at every component file you are using

const DemoComponent :NextPage = () => { return (<></>) }

from flowbite.

Lucasvo1 avatar Lucasvo1 commented on May 22, 2024

Do you need to install flowbite-react if you don't plan on using the React components?
I tried the above workaround using useEffect and it seems to work but hot-reloading doesn't work properly anymore.

from flowbite.

Tsabary avatar Tsabary commented on May 22, 2024

Still can't get this to work with Next. Tried to follow the documentation or some of the hacks suggested here but nothing seems to work. Only styling, but no actions on click/hover.

from flowbite.

Danjavia avatar Danjavia commented on May 22, 2024

+1

from flowbite.

freaktree avatar freaktree commented on May 22, 2024

+1

from flowbite.

adriandelgg avatar adriandelgg commented on May 22, 2024

+1

from flowbite.

yyc13236 avatar yyc13236 commented on May 22, 2024

Thank you! This actually worked for me.
import 'flowbite'
The thing about flowbite-react is somewhat it's hard to do customization, or once there is a lot of customization, it might become hard to maintain.
you can check out the issue here.
https://flowbite-react.com/theme
So compare to the flowbite-react I would still prefer the original flowbite package.

from flowbite.

fabyoamorim avatar fabyoamorim commented on May 22, 2024

I'm still unable to use flowbite plugin with latest Nextjs 13.4, tried all the Quickstart guide steps.
@satrio-pamungkas tried your solution as well, adding it to layout.tsx and configuring tailwind.condig but unfortunately does not seem to work with latest Nextjs app folder.

I do not want to use flowbite-react for customization purposes :/

Anyone aware if it's possible to use the flowbite plugin, with Nextjs 13.4?

from flowbite.

the-jahid avatar the-jahid commented on May 22, 2024

@fabyoamorim same here flowbite is not working in my next js project ..

from flowbite.

TuanMinPay avatar TuanMinPay commented on May 22, 2024

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 flowbite-nextjs

worked for me, thanks

from flowbite.

nafqureshi avatar nafqureshi commented on May 22, 2024

i did something like this to make it work:

this file is where i will use the component:

import dynamic from "next/dynamic";
const DatepickerInput = dynamic( () => import("./controls/datepicker_input.component").then((o) => o.DatepickerInput), { ssr: false } );

the actual file where i import and customize the component:

import React, { useEffect } from "react"; import Datepicker from "flowbite-datepicker/Datepicker"; import { classNames } from "@/lib/utils";

`export const DatepickerInput = (props) => {
const element = React.useRef(undefined);
useEffect(() => {
const datepickerElement = element.current;
new Datepicker(datepickerElement, {
autohide: true,
todayBtn: true,
todayBtnMode: 1,
clearBtn: true,
buttonClass:
"!rounded-full !bg-white hover:!bg-gray-100 focus-visible:!outline-sky-700 !clear-btn !text-gray-900 dark:!text-white dark:!bg-gray-700 !border !border-gray-300 dark:!border-gray-600 dark:hover:!bg-gray-600 focus:!ring-4 focus:!ring-blue-300 !font-medium !text-sm px-5 py-2 !text-center !w-1/2",
todayHighlight: true,
format: props.format,
});
datepickerElement?.addEventListener("changeDate", (e) => {
//do onchange stuff
});
}, []);

useEffect(() => {
  if (element.current && element.current.datepicker) {
    element.current.datepicker?.setDate(props.value);
  }
}, [props.value]);

return (
  <div className="relative max-w">
    <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
      <svg
        className="w-4 h-4 text-gray-500 dark:text-gray-400"
        xmlns="http://www.w3.org/2000/svg"
        fill="currentColor"
        viewBox="0 0 20 20"
      >
        <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
      </svg>
    </div>
    <input
      ref={element}
      type="text"
      placeholder="Select date"
      id={props.id}
      {...props.attributes}
      className={classNames(
        props.attributes?.className,
        "mt-3px block w-full rounded-md border border-gray-300 py-2 px-3 pl-10 shadow-sm focus:border-gray-900 focus:outline-none focus:ring-gray-900 disabled:cursor-not-allowed disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 sm:text-sm"
      )}
    />
  </div>
);

};`

from flowbite.

vladhuk avatar vladhuk commented on May 22, 2024

It helps me with flowbite datepicker (you need flowbite installed):

import { initDatepickers } from 'flowbite/dist/datepicker';

const Component = () => {
  useEffect(() => {
    setTimeout(() => {
      initDatepickers();
    });
  });

  // ...
}

Keep in mind that this useEffect must be inside component where you are using datepicker (at least for me it doesn't work when I call initDatepickers in layout.tsx).

Then update index.d.ts to make TS properly work with import above:

declare module 'flowbite/dist/datepicker' {
  export function initDatepickers(): void;
}

from flowbite.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.