CODEWITHSUNDEEP
javascriptnext.jstailwind-cssnext.js13flowbite
Robin
Robin

Reputation: 5427

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

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.

Upvotes: 4

Views: 3859

Answers (3)

Victoria Unizhona
Victoria Unizhona

Reputation: 266

What helped me was to init it manually. I am using Next.js 13

'use client';

import { initFlowbite } from 'flowbite';
import { memo } from 'react';

/**
 * FlowbiteScript Component
 *
 * This component initializes the Flowbite functionality using the `initFlowbite` function.
 * It is memoized for performance optimization.
 *
 * @component
 * @return {React.Fragment} An empty fragment, as this component doesn't render visible content.
 *
 * @example
 * // Import the component
 * import FlowbiteScript from './FlowbiteScript';
 *
 * // Use the component in your JSX
 * <FlowbiteScript />
 */
const FlowbiteScript = () => {
   // Initialize Flowbite functionality
   if (typeof window !== 'undefined') {
      initFlowbite();
   }

  // Return an empty fragment
  return <></>;
};

// Memoize the component for performance optimization
export default memo(FlowbiteScript);

Then I imported this component to the main layout.tsx and added in the body.

<FlowbiteScript />

Upvotes: 0

v1s10n_4
v1s10n_4

Reputation: 697

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>;
}

Upvotes: 0

Corwin
Corwin

Reputation: 25

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

Upvotes: 0

Related Questions