React-Bootstrap Uncaught ReferenceError: require 未定义

IT技术 javascript reactjs cdn react-bootstrap
2021-05-24 13:32:51

我是新手,我正在尝试在项目中使用 react-bootstrap。但是我无法让它工作,react-bootstrap 页面上的示例https://react-bootstrap.github.io/getting-started.html我只在我的 html 中包含以下代码,但我收到react.production.min.js:10 Uncaught ReferenceError: require is not defined 错误。实际上,我已经阅读了其他问题和许多教程,但仍然无法包含来自 cdn 的正确文件。什么应该是正确的文件,或者我是否需要任何其他脚本才能使其工作。谢谢,,

<!-- Bootsrap and react js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/cjs/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.31.5/react-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/cjs/react-dom.production.min.js"></script>

完整的错误跟踪如下:

Uncaught ReferenceError: require is not defined
at react.production.min.js:10
 react-bootstrap.min.js:10 Uncaught TypeError: Cannot read property    'Component' of undefined
at Object.e.__esModule.default (react-bootstrap.min.js:10)
at t (react-bootstrap.min.js:1)
at Object.e.__esModule.default (react-bootstrap.min.js:11)
at t (react-bootstrap.min.js:1)
at Object.t.exports (react-bootstrap.min.js:1)
at t (react-bootstrap.min.js:1)
at t (react-bootstrap.min.js:1)
at react-bootstrap.min.js:1
at react-bootstrap.min.js:1
at react-bootstrap.min.js:1

react-dom.production.min.js:13 Uncaught ReferenceError: require is not defined at react-dom.production.min.js:13 1:86 Uncaught ReferenceError: ReactBootstrap is not defined at 1:86

1个回答

如果你在浏览器中使用它,在你使用 webpack 或类似的东西之前不要遵循 CommonJS 部分。浏览器是异步的,因此不能require同步使用请遵循 ES6(如果您使用 Babel 进行转译)或 AMD(使用 RequireJS 或类似的)说明。

如果您不知道其中任何一个是什么意思,请按照“浏览器全局变量”说明包含所有内容:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/<react-version>/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/<react-version>/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/<version>/react-bootstrap.min.js"></script>
<script>
var Alert = ReactBootstrap.Alert;
</script>