javascript - 将 bootstrap 5 模块导入 next.js

Question

我正在做一个博客项目。我已经在heroku上部署了strapi cms并将帖子发送到mongodb，我正在获取next.js上的数据。我正在通过 bootstrap-5 制作样式并从 _app.js 文件导入 custom.scss 文件。现在一切都很好，但是当我尝试导入 bootstrap-5 的 js 文件时，它会给我带来一堆错误。我在网上找不到明确的答案。我面临的问题可能是什么原因？

// import "../../node_modules/bootstrap/dist/js/bootstrap.bundle.min"
import "../../node_modules/bootstrap/dist/js/bootstrap.esm.min"
// import "../../node_modules/bootstrap/dist/js/bootstrap.esm"
// import "~bootstrap/dist/js/bootstrap.esm.min"
import "../custom.scss"

error - ReferenceError: document is not defined
    at Module../node_modules/bootstrap/dist/js/bootstrap.esm.min.js (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:195:2902)    
    at __webpack_require__ (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:23:31)
    at Module../src/pages/_app.jsx (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:1070:107)
    at __webpack_require__ (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:23:31)
    at Object.0 (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:1115:18)
    at __webpack_require__ (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:23:31)
    at C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:91:18
    at Object.<anonymous> (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:94:10)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at requirePage (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\node_modules\next\dist\next-server\server\require.js:1:1184)
    at loadComponents (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\node_modules\next\dist\next-server\server\load-components.js:1:865)
ReferenceError: document is not defined
    at Module../node_modules/bootstrap/dist/js/bootstrap.esm.min.js (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:195:2902)    
    at __webpack_require__ (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:23:31)
    at Module../src/pages/_app.jsx (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:1070:107)
    at __webpack_require__ (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:23:31)
    at Object.0 (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:1115:18)
    at __webpack_require__ (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:23:31)
    at C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:91:18
    at Object.<anonymous> (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:94:10)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at requirePage (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\node_modules\next\dist\next-server\server\require.js:1:1184)
    at loadComponents (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\node_modules\next\dist\next-server\server\load-components.js:1:865)

标签： javascriptreactjstwitter-bootstrapnext.js