React-Bootstrap Uncaught ReferenceError: require i

Question

I am new to react, I am trying to use react-bootstrap in a project. However I could not get it worked, the example on react-bootstrap page at https://react-bootstrap.github.io/getting-started.html. I only included below code in my html, but I am getting react.production.min.js:10 Uncaught ReferenceError: require is not defined error. Actually I have read other questions and many tutorials, still could not even include correct files from cdn. What should be the correct files or do I need to any other scripts to get it worked. Thank you,,

<!-- 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>

Full error trace is below :

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

Answer 1

If you are using it in a browser, don't follow the CommonJS section until you are using webpack or something similar. Browsers are asynchronous, therefore you cannot use require synchronously. Follow the ES6 (if you are transpiling with Babel) or AMD (with RequireJS or similar) instructions instead.

If you don't know what any of those mean, follow the "Browser globals" instructions to include everything:

<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>