Next.js encountered an error while trying to locate the flowbite.min.js file for Tailwindcss and Flowbite, resulting in a

Question

Next.js encountered an error while trying to locate the flowbite.min.js file for Tailwindcss and Flowbite, resulting in a

I'm having an issue with integrating the flowbite package with TailwindCSS in my Next.js application. Despite configuring everything correctly, I am encountering an error when adding the flowbite.min.js script:

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

I followed Next.js documentation and added the script in my _app.js file. Here is how it looks:

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} />
    </>
  )
}

The flowbite documentation suggests adding this script at the end of the body tag:

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

Even though using a CDN works, I suspect there might be an issue with the path I provided. What should be the correct path for the flowbite.min.js script?

It's worth noting that in my Next.js setup, I prefer not to utilize flowbite-react.

javascript next.js tailwind-css next.js13 flowbite

Answer 1

Answer №1

One solution could be opting for the flowbites content delivery network (CDN) to ensure your node_modules are accessible even if they are not in the public folder.

You can find the CDN url here: https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.4/flowbite.min.js

Answer 2

One solution could be opting for the flowbites content delivery network (CDN) to ensure your node_modules are accessible even if they are not in the public folder.

You can find the CDN url here: https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.4/flowbite.min.js

Answer 3

Answer №2

According to the specific setup instructions for Next.js in Flowbite documentation, it is recommended to utilize Flowbite components directly from the flowbite-react package.

Begin by installing the flowbite-react package:

npm install flowbite flowbite-react --save

Integrate Flowbite as a plugin within your tailwind.config.js file:

/**
 * @type {import('@types/tailwindcss/tailwind-config').TailwindConfig}
 */
module.exports = {
  content: [
    // ...
    "./node_modules/flowbite-react/**/*.js",
  ],
  plugins: [
    require("flowbite/plugin")
  ],
  // ...
};

This enables you to use Flowbite components like so:

import { Alert } from "flowbite-react";

export default function MyPage() {
  return <Alert color="info">Alert!</Alert>;
}

Answer 4

According to the specific setup instructions for Next.js in Flowbite documentation, it is recommended to utilize Flowbite components directly from the flowbite-react package.

Begin by installing the flowbite-react package:

npm install flowbite flowbite-react --save

Integrate Flowbite as a plugin within your tailwind.config.js file:

/**
 * @type {import('@types/tailwindcss/tailwind-config').TailwindConfig}
 */
module.exports = {
  content: [
    // ...
    "./node_modules/flowbite-react/**/*.js",
  ],
  plugins: [
    require("flowbite/plugin")
  ],
  // ...
};

This enables you to use Flowbite components like so:

import { Alert } from "flowbite-react";

export default function MyPage() {
  return <Alert color="info">Alert!</Alert>;
}

Answer 5

Answer №3

One helpful solution for me was to manually initialize it. My setup involves using Next.js version 13.

'use client';

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

/**
 * FlowbiteScript Component
 *
 * This component handles the initialization of Flowbite functionality with the `initFlowbite` function.
 * It is optimized for performance by being memoized.
 *
 * @component
 * @return {React.Fragment} An empty fragment as this component does not render visible content.
 *
 * @example
 * // Import the component
 * import FlowbiteScript from './FlowbiteScript';
 *
 * // Include the component in JSX
 * <FlowbiteScript />
 */
const FlowbiteScript = () => {
   // Initialize Flowbite functionality
   if (typeof window !== 'undefined') {
      initFlowbite();
   }

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

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

Subsequently, I brought this component into the main layout.tsx file and placed it within the body section.

<FlowbiteScript />

Answer 6

One helpful solution for me was to manually initialize it. My setup involves using Next.js version 13.

'use client';

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

/**
 * FlowbiteScript Component
 *
 * This component handles the initialization of Flowbite functionality with the `initFlowbite` function.
 * It is optimized for performance by being memoized.
 *
 * @component
 * @return {React.Fragment} An empty fragment as this component does not render visible content.
 *
 * @example
 * // Import the component
 * import FlowbiteScript from './FlowbiteScript';
 *
 * // Include the component in JSX
 * <FlowbiteScript />
 */
const FlowbiteScript = () => {
   // Initialize Flowbite functionality
   if (typeof window !== 'undefined') {
      initFlowbite();
   }

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

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

Subsequently, I brought this component into the main layout.tsx file and placed it within the body section.

<FlowbiteScript />

Next.js encountered an error while trying to locate the flowbite.min.js file for Tailwindcss and Flowbite, resulting in a

Answer №1

Answer №2

Answer №3

Similar questions

Loop within a promise results in undefined

Troubleshooting: My Angular 2 Application is Unable to Perform HTTP

What is the function of async in Next.js when triggered by an onClick

Would you say the time complexity of this function is O(N) or O(N^2)?

What is the best way to retrieve the UTC value of a specific date and time within a particular time zone using JavaScript?

A recursive approach for constructing a tree structure in Angular

Guide on Capturing Szimek/Signature_Pad using PHP: How to Save Javascript as PHP Variable?

Tips for creating query requests in ExpressJS

Is there a way to incorporate an external JavaScript file into a .ts file without the need for conversion?

When attempting to change the text in the textarea by selecting a different option from the dropdown list, the text is not updating

What is the best way to showcase specific rows with Vue.js?

Crafting a trail of breadcrumbs using AngularJS

Concealed Input Enhancements for AutoComplete

Issue with NullInjectorError: Failure to provide a custom component - Attempting to add to providers without success

Error in React Component: Array objects in response are not in correct order

Using JavaScript to Toggle Visibility of Div Elements

Storing individual socket.io data for each client

Is it necessary to make multiple calls following a successful AJAX request?

CLI package enables exporting API facilities

Holding onto numerous AJAX requests while disconnected, then dispatching them once the network connection is