reactstrap 是不是可以与 bootstrap v5 一起压缩

Posted 2023-03-23

【中文标题】reactstrap 是不是可以与 bootstrap v5 一起压缩

【英文标题】：Is reactstrap compactable with bootstrap v5reactstrap 是否可以与 bootstrap v5 一起压缩

【发布时间】：2021-12-22 22:18:17

【问题描述】：

我在使用 reactstrap、bootstrap 和 nextjs 时遇到了这个错误

Server Error
SyntaxError: The requested module 'react-popper' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from 'react-popper';
const  Manager, Popper, Reference  = pkg;

这是我的 package.json 文件

"@apollo/react-hooks": "^3.1.5",
"@apollo/react-s-s-r": "^3.1.5",
"@emotion/cache": "^11.5.0",
"@emotion/react": "^11.5.0",
"@emotion/server": "^11.4.0",
"@emotion/styled": "^11.3.0",
"@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"@popperjs/core": "^2.10.2",
"apollo-boost": "^0.4.7",
"apollo-link-http": "^1.5.17",
"axios": "^0.24.0",
"bootstrap": "^5.1.3",
"express": "^4.17.1",
"graphql": "^15.0.0",
"isomorphic-fetch": "^2.2.1",
"js-cookie": "^2.2.1",
"next": "^12.0.1",
"next-apollo": "^3.1.10",
"next-with-apollo": "^5.2.1",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-popper": "^2.2.5",
"reactstrap": "^9.0.0"

我在网上查了一些文章，建议我安装 react-popper 和 @popperjs/core，我安装了，但没有成功

【问题讨论】：

也许你可以看看react-bootstrap.github.io/getting-started/introduction。这是为 react 重建的，并使用 bootstrap v5

谢谢，但它们是同一个框架

【参考方案1】：

我今天遇到了同样的问题。尝试更新到最新版本的 Node.js。这解决了我的问题。

要确认您已安装最新版本，请在终端中输入 node -v。

【讨论】：

我正在使用节点 v12.19.0

@SaintEverest node 的最新稳定版本是 16.14.0 来自：nodejs.org/en

【参考方案2】：

如果我希望它与节点 v12.18.3 一起使用，我必须将 reactstrap 降级为 reactstrap": "^8.10.1

【参考方案3】：

在使用 Next.js 和 Bootstrap 时，我也遇到了更新到 Reactstrap v9 的问题。

Reactstrap v9 使用 Bootstrap v5。

为了将 Reactstrap 更新到 v9，我必须执行以下操作：

在 package.json 文件中更新节点到最新的稳定版本 在 _document 文件中将引导程序更新到版本 5：href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" 通过运行安装最新版本的 reactstrap：npm install reactstrap@latest