Esta es mi primera experiencia con Next JS y estoy tratando de iniciar la aplicación Next JS, que ha funcionado bien hasta ahora que tengo que usar Javascript de Bootstrap para un carrusel.

Entonces, primero, agregué el bootstrap js al script de la siguiente página js ( pages/gallery/[id].js ) manualmente de esta manera:

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

Esto funciona inicialmente, pero tan pronto como aparece la segunda imagen de la diapositiva, el siguiente js arroja el siguiente 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

Encontré otra forma de corregir el error en línea. Dice que debería importar bootstrap js en mis pages/_app.js así:

 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

Pero esto también me da el siguiente 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

Ahora ya no se que hacer, alguien me puede ayudar por favor?