這是我對 Next JS 的第一次體驗，我正在嘗試引導 Next JS 應用程式，該應用程式一直運行良好，直到現在我必須使用引導程式的 Javascript 進行輪播。
所以首先，我pages/gallery/[id].js手動將引導 js 添加到下一個 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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js (6:13913)
st._slide
https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js (6:15057)
st.next
https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js (6:10814)
st.nextWhenVisible
https://cdn.jsdelivr.net/npm/[email protected]/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
現在我什至不知道該怎么辦，有人可以幫助我嗎？
uj5u.com熱心網友回復：
使用方法 2，對于 popperjs 錯誤，請按照以下步驟操作
npm i @popperjs/core
- 請參閱此處如何解決此錯誤：“找不到模塊：無法決議 popper.js”
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/408962.html
標籤：