I'm using babel.js, try to import ReactBootstrap like this
const { Button } = ReactBootstrap.Button;
const { ButtonGroup } = ReactBootstrap.ButtonGroup;
Error
Uncaught ReferenceError: ReactBootstrap is not defined
how to fix it?
-
how are you adding bootstrap to your project?Amit Chauhan– Amit Chauhan2020-01-09 05:20:41 +00:00Commented Jan 9, 2020 at 5:20
-
Can you share the whole code?ArchNoob– ArchNoob2020-01-09 05:22:45 +00:00Commented Jan 9, 2020 at 5:22
Add a comment
|
2 Answers
Can you import like this way
import { Button } from 'ReactBootstrap.Button'
import { ButtonGroup } from 'ReactBootstrap.ButtonGroup'
2 Comments
hkguile
Uncaught ReferenceError: require is not defined, need to use browsify to compile if using this kind of syntax?
Tobias Cohen
@hkguile by default browsers will not allow use of import. You can either use a compiler like webpack or browserify to combine your JS into one file, or load your script with the 'type="module"' attribute to enable modules in the browser. You may also need to change the filename to ".mjs" for babel to handle that correctly. v8.dev/features/modules
You can use the following code for importing your ReactBootstrap using ES5 syntax.
const { Button } = require("ReactBootstrap.Button");
const { ButtonGroup } = require("ReactBootstrap.ButtonGroup");
1 Comment
Ashish Bhardwaj
If you want to use ES6 then you have to use import syntax. import { Button } from 'ReactBootstrap.Button' import { ButtonGroup } from 'ReactBootstrap.ButtonGroup' But as you might know, ES6 syntaxes are not supported in older versions of browsers. To make this work in every version you have to use a tool like webpack to transpile the syntax. You have to apply certain rules and loaders of webpack to convert these ES6 syntax.