Having trouble importing Bootstrap into Next.js? It seems like the issue may be related to the

Question

Having trouble importing Bootstrap into Next.js? It seems like the issue may be related to the

I am currently facing an issue with importing bootstrap 5.3.2 (not react-bootstrap) into my NextJS 14.1.0 project that utilizes the new App Router. My goal is to strategically utilize individual Bootstrap components (not through data-attrs).

I managed to make it work but I keep encountering a persistent error 500 every time I perform a hard refresh. The console keeps showing this specific message:

 ⨯ node_modules/bootstrap/dist/js/bootstrap.esm.js (803:18) @ document
 ⨯ ReferenceError: document is not defined
    at __webpack_require__ (/Users/rsilva/Desktop/bs/.next/server/webpack-runtime.js:33:42)
    at eval (./app/TooltipComponent.js:9:67)
    at (ssr)/./app/TooltipComponent.js (/Users/rsilva/Desktop/bs/.next/server/app/page.js:162:1)
    at __webpack_require__ (/Users/rsilva/Desktop/bs/.next/server/webpack-runtime.js:33:42)

Below are the relevant snippets of code:

layout.js

import "bootstrap/dist/css/bootstrap.css";
import BootstrapProvider from "./providers/bootstrap";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className="container my-5">
        <BootstrapProvider/>
        {children}
      </body>
    </html>
  );
}

My BS provider (bootstrap.js):

"use client";

import { useEffect } from 'react';

function BootstrapProvider() {
  useEffect(() => {

    async function loadBootstrap() {
      const bootstrap = await import('bootstrap/dist/js/bootstrap.bundle.min.js');
      window.bootstrap = bootstrap;
    }

    loadBootstrap();
    
  }, []);

  return null;
}

export default BootstrapProvider;

page.js

import { TooltipComponent } from "./TooltipComponent";

export default function Home() {
  return (
    <main>
      
     <TooltipComponent title="Test">
        test tooltip
      </TooltipComponent>
      
    </main>
  );
}

Lastly, here's the component where the Tooltip is used programmatically:

"use client";

import { useEffect, useRef } from "react";
import { Tooltip } from "bootstrap";

export function TooltipComponent({
  children,
  title = "Missing tooltip 'title' property",
  placement = "top",
  trigger = "hover",
}) {
  const tooltipRef = useRef();

  useEffect(() => {
    if (title) {
      const tooltip = new Tooltip(tooltipRef.current, {
        title: title,
        placement: placement,
        trigger: trigger,
        container: "body",
      });
      return () => {
        tooltip.dispose();
      };
    }
  }, [title]);

  return <span ref={tooltipRef}>{children}</span>;
}

Any suggestions or insights on how to resolve this issue would be greatly appreciated. Thank you!

javascript reactjs twitter-bootstrap next.js bootstrap-5

Answer 1

Answer №1

To add the "bootstrap/dist/js/bootstrap.bundle.min.js" JavaScript file to your layout.js, utilize the "Script" component. No extra components are required for this task. Reference: https://nextjs.org/docs/pages/building-your-application/optimizing/scripts

Answer 2

To add the "bootstrap/dist/js/bootstrap.bundle.min.js" JavaScript file to your layout.js, utilize the "Script" component. No extra components are required for this task. Reference: https://nextjs.org/docs/pages/building-your-application/optimizing/scripts

Answer 3

Answer №2

To include the condensed Bootstrap CSS file in the entry pages/_app.js file of Next.js:

import "bootstrap/dist/css/bootstrap.min.css"; 
Also, import bootstrap CSS with "../styles/globals.css";

function MyApp({ Component, pageProps }) {   return <Component {...pageProps} />; }

export default MyApp;

Answer 4

To include the condensed Bootstrap CSS file in the entry pages/_app.js file of Next.js:

import "bootstrap/dist/css/bootstrap.min.css"; 
Also, import bootstrap CSS with "../styles/globals.css";

function MyApp({ Component, pageProps }) {   return <Component {...pageProps} />; }

export default MyApp;

Answer 5

Answer №3

Have you considered utilizing react-bootstrap for your project?

With react-bootstrap, you can easily integrate Bootstrap into your React application without the need to set up a Bootstrap Provider or link vanilla Bootstrap globally.

Check out this Example Tooltip to see it in action.

EDIT

Instead of importing Tooltip in your component, you could include the Bootstrap JavaScript file directly in the script tag and use it similarly to how you would in vanilla JavaScript or jQuery.

import Script from 'next/script'
 
export default function Page() {
  return (
    <>
      <Script src="bootstrap/dist/js/bootstrap.bundle.min.js" strategy="afterInteractive" />
    </>
  )
}

You can implement the tooltip functionality within a component like so:

"use client";

export function TooltipComponent({
  children,
  title = "Missing tooltip 'title' property",
  placement = "top",
  trigger = "hover",
}) {
  return <span data-bs-toggle="tooltip" data-bs-placement={placement} title={title}>{children}</span>;
}

Answer 6

Have you considered utilizing react-bootstrap for your project?

With react-bootstrap, you can easily integrate Bootstrap into your React application without the need to set up a Bootstrap Provider or link vanilla Bootstrap globally.

Check out this Example Tooltip to see it in action.

EDIT

Instead of importing Tooltip in your component, you could include the Bootstrap JavaScript file directly in the script tag and use it similarly to how you would in vanilla JavaScript or jQuery.

import Script from 'next/script'
 
export default function Page() {
  return (
    <>
      <Script src="bootstrap/dist/js/bootstrap.bundle.min.js" strategy="afterInteractive" />
    </>
  )
}

You can implement the tooltip functionality within a component like so:

"use client";

export function TooltipComponent({
  children,
  title = "Missing tooltip 'title' property",
  placement = "top",
  trigger = "hover",
}) {
  return <span data-bs-toggle="tooltip" data-bs-placement={placement} title={title}>{children}</span>;
}

Answer 7

Answer №4

When you encounter the

ReferenceError: document is not defined

issue, it's because Bootstrap JavaScript code is running in server-side rendering (SSR) where there is no DOM present. Bootstrap's JavaScript needs the DOM to function properly. This leads to Bootstrap attempting to access the document object during SSR but failing due to the absence of a DOM, resulting in the error message.

To fix this error, you must ensure that the Bootstrap JavaScript is only loaded on the client side where the DOM exists. Modifications should be made to the TooltipComponent.tsx file as shown in the comments section below.

"use client";

import { useEffect, useRef } from "react";
// Remove this
// import { Tooltip } from "bootstrap";

export function TooltipComponent({
  children,
  title = "Missing tooltip 'title' property",
  placement = "top",
  trigger = "hover",
}) {
  const tooltipRef = useRef();

  useEffect(() => {
    // Add this
    const { Tooltip } = require("bootstrap");

    if (title) {
      const tooltip = new Tooltip(tooltipRef.current, {
        title: title,
        placement: placement,
        trigger: trigger,
        container: "body",
      });
      return () => {
        tooltip.dispose();
      };
    }
  }, [title]);

  return <span ref={tooltipRef}>{children}</span>;
}

I was able to resolve the error by following these steps, as indicated in the screenshot below (taken after refreshing the page).

https://i.stack.imgur.com/Ewg00.png

If you encounter any further issues, feel free to reach out. I created the Next.js app from scratch, so my code may differ slightly. In such cases, I will update my response with complete code examples for all relevant files (layout.tsx, page.tsx, tooltip.tsx, bootstrap.js, etc.).

Answer 8

When you encounter the

ReferenceError: document is not defined

issue, it's because Bootstrap JavaScript code is running in server-side rendering (SSR) where there is no DOM present. Bootstrap's JavaScript needs the DOM to function properly. This leads to Bootstrap attempting to access the document object during SSR but failing due to the absence of a DOM, resulting in the error message.

To fix this error, you must ensure that the Bootstrap JavaScript is only loaded on the client side where the DOM exists. Modifications should be made to the TooltipComponent.tsx file as shown in the comments section below.

"use client";

import { useEffect, useRef } from "react";
// Remove this
// import { Tooltip } from "bootstrap";

export function TooltipComponent({
  children,
  title = "Missing tooltip 'title' property",
  placement = "top",
  trigger = "hover",
}) {
  const tooltipRef = useRef();

  useEffect(() => {
    // Add this
    const { Tooltip } = require("bootstrap");

    if (title) {
      const tooltip = new Tooltip(tooltipRef.current, {
        title: title,
        placement: placement,
        trigger: trigger,
        container: "body",
      });
      return () => {
        tooltip.dispose();
      };
    }
  }, [title]);

  return <span ref={tooltipRef}>{children}</span>;
}

I was able to resolve the error by following these steps, as indicated in the screenshot below (taken after refreshing the page).

https://i.stack.imgur.com/Ewg00.png

If you encounter any further issues, feel free to reach out. I created the Next.js app from scratch, so my code may differ slightly. In such cases, I will update my response with complete code examples for all relevant files (layout.tsx, page.tsx, tooltip.tsx, bootstrap.js, etc.).

Having trouble importing Bootstrap into Next.js? It seems like the issue may be related to the

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

MVC5 Toggle Button for Instant Display and Concealment

Numerous conversations happening simultaneously on one screen

Node.js application - varying NODE_ENV upon NPM launch

Invoke a Python function from JavaScript

Using Selenium to interact with drop-down lists using div tags instead of select tags

Understanding 'this' in ChartJS within an Angular application

The image source failed to load the image using the function

Caution: Potential Unresolved Promise Rejection Detected (ID: 21) - Error: Undefined is not a valid object when trying to evaluate 'res.json'

Executing a function on the window object in JavaScript

Getting a JWT token from Express to Angular using ngResource: A step-by-step guide

Material UI makes it possible for the ToggleButtonGroup to maintain a consistent fixed size regardless of its content

What is the best way to generate an array from JSON data while ensuring that the values are not duplicated?

The conflict arises when importing between baseUrl and node_modules

Replacing variables in a function: A step-by-step guide

Issue encountered while utilizing JQueryUI alongside TypeScript and the definition file from DefinitelyTyped

Every individual child component must be assigned a distinct key prop, even if they are pre-defined. - Utilizing REACT

The act of employing `Function.prototype.run` within an Angular TypeScript class is deemed as illegitimate

When using jQuery Ajax, only pass the query string if it is defined and not empty

Unexpected behavior: JQuery Ajax request not displaying Json object following recent update to JQuery version 1.10.2

Material UI React's FormControl