1

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

Birdy
  • 775
  • 1
  • 6
  • 21
Ali insan Soyaslan
  • 836
  • 5
  • 14
  • 33
  • Does this answer your question? [Client on Node.js: Uncaught ReferenceError: require is not defined](https://stackoverflow.com/questions/19059580/client-on-node-js-uncaught-referenceerror-require-is-not-defined) – JBallin Apr 25 '23 at 05:35

1 Answers1

3

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>
Derek 朕會功夫
  • 92,235
  • 44
  • 185
  • 247
  • thanks for quick reply, Actually, I am just including files and errors are coming up in console. Tha whole code about react-bootstrap is those includes, Also I will update the post for full errors. – Ali insan Soyaslan Nov 29 '17 at 06:36
  • @AliinsanSoyaslan I see what you mean, try another CDN link instead: https://jsfiddle.net/DerekL/mb7m0yd0/ (Look at External Resources in the left) – Derek 朕會功夫 Nov 29 '17 at 06:42
  • I tried to use files from npm(I am new to npm too) and here is another problem. MAybe you can help https://stackoverflow.com/questions/47547580/uncaught-referenceerror-process-is-not-defined-react-bootsrap – Ali insan Soyaslan Nov 29 '17 at 07:53