如何在我的 Next JS 应用程序中使用引导程序 5 Javascript？

Question

这是我对 Next JS 的第一次体验，我正在尝试引导 Next JS 应用程序，该应用程序一直运行良好，直到现在我必须使用引导程序的 Javascript 进行轮播。

因此，首先，我将引导 js 添加到下一个 js 页面（ pages/gallery/[id].js ）的脚本中，如下所示：

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

这最初是有效的，但是一旦第二张幻灯片图像进来，下一个 js 就会抛出以下错误：

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

我找到了另一种在线纠正错误的方法。 它说我应该像这样在我的pages/_app.js中导入引导 js：

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

但这也给了我以下错误：

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

现在我什至不知道该怎么办，有人可以帮助我吗？

Answer 1

使用方法 2，对于 popperjs 错误，请按照以下步骤操作

npm i @popperjs/core

• 请参阅此处如何解决此错误：“找不到模块：无法解析 popper.js”