Question 53550 in Javascript Question posted in
A very good W3school tutorial can be found here.

Tailwindcss and Flowbite – flowbite.min.js file not found (404) in Next.js – Javascript

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.

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 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>;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search