4

I want to use only flowbite package with tailwind in my nextjs application. I configure everything correctly. But adding flowbite.min.js script throws me error -

GET http://localhost:3000/node_modules/flowbite/dist/flowbite.min.js net::ERR_ABORTED 404 (Not Found)

I add the script in my _app.js file as nextjs documentation suggested. Here is my _app.js file

import Script from 'next/script'
import '~/styles/globals.css'

export default function App({Component, pageProps}) {
  return (
    <>
      <Script src='../node_modules/flowbite/dist/flowbite.min.js' />
      <Component {...pageProps} />
    </>
  )
}

In flowbite documentation at number 4 they suggest to add this script end of the body tag

<script src="../path/to/flowbite/dist/flowbite.min.js"></script>

Since I'm using nextjs, I add this script in my _app.js file. I try with cdn and it works. Probably I'm adding path wrongly. What should be the path for flowbite.min.js script?

In nextjs I don't want to use flowbite-react.

Robin
  • 4,902
  • 2
  • 27
  • 43

2 Answers2

0

As stated in the nextjs specific setup guide in flowbite docs you should directly use flowbite components from the flowbite-react package.

  1. install flowbite-react
npm install flowbite flowbite-react --save
  1. Require Flowbite as a plugin inside your tailwind.config.js file:
/**
 * @type {import('@types/tailwindcss/tailwind-config').TailwindConfig}
 */
module.exports = {
  content: [
    // ...
    "./node_modules/flowbite-react/**/*.js",
  ],
  plugins: [
    require("flowbite/plugin")
  ],
  // ...
};

So you can use Flowbite components like this:

import { Alert } from "flowbite-react";

export default function MyPage() {
  return <Alert color="info">Alert!</Alert>;
}
v1s10n_4
  • 598
  • 3
  • 18
-1

I suggest using flowbites cdn, as sometimes your node_modules isn’t in the public folder.

CDN url: https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.4/flowbite.min.js

Corwin
  • 15
  • 4
  • 1
    Yeah, I'm using cdn for now. – Robin Mar 24 '23 at 20:02
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 29 '23 at 15:25