相关疑难解决方法(0)

有谁知道你是否可以react-bootstrap与 Next.js 一起使用？我正在使用两者的最新版本，此时我可以提供代码，但现在我的应用程序没有抛出任何错误，它只是没有注册我的任何react-bootstrap组件。也许有一些我无法在互联网上找到的技巧？如果有帮助，我可以提供代码或文件结构。提前致谢！

下一个.config.js

const withCSS = require('@zeit/next-css')

module.exports = withCSS({
    /* my next config */
})

页面/index.js

import Badge from 'react-bootstrap/Badge';
import "../public/css/bootstrap.css";
const Index = () => (
    <div>
        <p className='display-4'>Hello</p>
        <Badge>Heading</Badge>
    </div>
)

export default Index;

包.json

{
  "name": "vacation-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "next": "^9.1.1",
    "react": "^16.10.2",
    "react-bootstrap": "^1.0.0-beta.14", …

我刚刚完成安装 bootstrap 5 版本^5.0.0-alpha1并导入 bootstrapapp.js

import "bootstrap"

其他.js

var myModal = new bootstrap.Modal(document.getElementById('myModal'));
myModal.show();

当我运行代码时，它给我错误ReferenceError: bootstrap is not defined。

然后我尝试像这样在other.js 中导入引导程序

import bootstrap from "bootstrap"

但是当我运行npm run dev错误时“在‘​​bootstrap’中找不到导出‘默认’（导入为‘引导程序’）

如果我像import { Modal } from "bootstrap"这样手动导入模态会给我错误“TypeError：非法调用”

我正在运行 NextJS v11.1.12，并尝试运行一个标准的 Vanilla JS 函数，该函数使用“state-select-dropdown-box”类切换 div 的 CSS 类。我的代码是：

const Header = () => {

const dropDownMenu = document.querySelector('state-select-dropdown-box');
console.log(dropDownMenu);

function toggleMenu() {
    dropDownMenu.classList.toggle('show');
}

return ( <Component /> );
}

当应用程序编译时，我收到“引用错误：文档未定义”。奇怪的是我今天早些时候运行了这些函数，没有任何问题并且没有改变任何东西。

经过大量谷歌搜索和研究后，我得出的结论是，也许我只是不明白 SSR 在 NextJS 中是如何工作的？谁能解释或阐明为什么我没有达到我预期的结果以及如何解决这个问题？