React-bootstrap not allowing `import {components}`

Question

This is kinda weird. It works with other projects, but not with React-Bootstrap. For example;

import {Jumbotron, Button} from 'react-bootstrap';
import * as ReactBootstrap from 'react-bootstrap';

both give me a Invalid argument must be an array in all.js:12 file. However, importing like this works:

var Jumbotron = require('react-bootstrap/lib/Jumbotron');
var Button = require('react-bootstrap/lib/Button');

Sure I can use this, but it's more efficient to declare an array of components I want. Why is React-Bootstrap not supporting something so trivial?

Answer 1

react-bootstrap currently don't support ES6 modules natively.

In other words, you need to do some work to be able to use ES6 imports. One way is to use a transpiler like Babel that will transpile your code from ES6 to CommonJS modules.