How can I use bootstrap 5 Javascript in my Next JS app?

Question

This is my first experience with Next JS and I am trying to bootstrap the Next JS app, which has been going on well until now that I have to use bootstrap's Javascript for a carousel.

So first, I added the bootstrap js to the script of the next js page (pages/gallery/[id].js) manually like this:

import Script from "next/script";
import Layout from "../../layouts/interface";
import SlidingComponent from "../../components/slide";

export default function GalleryPage() {
    const router = useRouter();
    const {id} = router.query;

  return (
    <Layout>
    <SlidingComponent />

   <Script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous" />
    </Layout>
  )
}

This works initially but as soon as the second slide image comes in, next js throws the following error:

Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'classList')

Call Stack
st._setActiveIndicatorElement
https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js (6:13913)
st._slide
https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js (6:15057)
st.next
https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js (6:10814)
st.nextWhenVisible
https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js (6:10883

I found another way to correct the error online. It says I should import the bootstrap js in my pages/_app.js like this:

import 'bootstrap/dist/css/bootstrap.css'
import '../styles/globals.css'
import {useEffect} from "react";

//this is what the solution says:
useEffect(() => {
    import("bootstrap/dist/js/bootstrap");
}, []);

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

export default MyApp

But this too gives me the following error:

https://nextjs.org/docs/messages/module-not-found
wait  - compiling...
error - ./node_modules/bootstrap/dist/js/bootstrap.js:7:0
Module not found: Can't resolve '@popperjs/core'

Import trace for requested module:
./pages/_app.js

Now I don't even know what to do, can anybody please help me?

Does this answer your question? [How to fix this error : " Module not found :can't resolve popper.js "](https://stackoverflow.com/questions/57459917/how-to-fix-this-error-module-not-found-cant-resolve-popper-js) — juliomalves, Jan 12 '22 at 19:01

score 1 · Accepted Answer · answered Jan 11 '22 at 16:58

1

Use Approach 2, for the popperjs error follow these steps

npm i @popperjs/core

see here How to fix this error : " Module not found :can't resolve popper.js "

answered Jan 11 '22 at 16:58

Ramakay

2,919
1
5
21

Thank you @Ramakay. `npm i @popperjs/core` got rid of the popper problem but now when I check the webpage, after the second slide comes in, I get this error: `Unhandled Runtime Error TypeError: Cannot read properties of null (reading 'classList')` – Ibrahim Jan 11 '22 at 18:58
Are you able to add a stackblitz or equivalent workspace to look at. – Ramakay Jan 11 '22 at 22:51
1

I have been able to fix the error! turns out there was a typo when I was altering the bootstrap carousel! Thanks man! – Ibrahim Jan 12 '22 at 07:53

How can I use bootstrap 5 Javascript in my Next JS app?

1 Answers1