Cannot import components from react-bootstrap

Question

I'm new to React and started exploring bootstrap few days ago. But, whenever I'm trying to import something from react-bootstrap, it's throwing error.

I've already tried reinstalling react-bootstrap. But it doesn't solve the problem. These are my imports:

import React, { Component } from 'react';
import {Button} from 'react-bootstrap/Button'; <-- culprit
import logo from './logo.svg';
import './App.css';
import Chart from './components/Chart';
import axios from 'axios';
import {Typeahead} from 'react-bootstrap-typeahead'; <-- works fine

The error is in some line in the ThemeProvider.js, which comes with react-bootstrap.

TypeError: Object doesn't support property or method 'createContext'

  15 | 
  16 | var _react = _interopRequireWildcard(require("react"));
  17 | 
> 18 | var ThemeContext = _react.default.createContext({});
  19 | 
  20 | var Consumer = ThemeContext.Consumer,
  21 |     Provider = ThemeContext.Provider;

Cat_Enthusiast · Accepted Answer · 2019-08-16 07:06:57Z

3

When you import something wrapped around with {}, it refers to something that is exported with an explicit name identifier.

In this case: import {Button} from 'react-bootstrap/Button' would mean that file has explicitly named one of their exports Button. But that's unlikely, because conventionally with these libraries, when you import from a specific file like /Button, they will almost always use a default export instead.

The solution would be to simply get the default export by doing:

import Button from 'react-bootstrap/Button'

With a default export, you can name the import anything you want, even something like this:

import MyButton from 'react-bootstrap/Button'

Alternatively, you can just import from the head folder. In that case, you would actually have to use {} to fetch the named items.

import {Button, Input, Form} from 'react-bootstrap';

answered Aug 16, 2019 at 7:06

Cat_Enthusiast

15.7k5 gold badges26 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Jezpoz Over a year ago

An awesome and simple explanation of named and default exports. A must learn for a person just starting out with React and Node.

Joy Over a year ago

tried everything you mentioned, but no hope. Now it is throwing from line no. 4 of Themeprovider.js. :(

Cat_Enthusiast Over a year ago

@Joy are you using create-react-app? It sounds like you don't have your babel configured.

Cat_Enthusiast Over a year ago

@Jezpoz thank you! I'm glad you think its helpful :)

Joy Over a year ago

that did it ! I hadn't use create-react-app when I created the project. Rather, I downloaded some project from Internet and kept modifying it. After I created a fresh project, everything is working fine ! Thanks a lot mate :) you guys are awesome !

|

adel · Accepted Answer · 2019-08-16 07:03:24Z

2

try this:

import {Button} from 'react-bootstrap';

or:

 import Button from 'react-bootstrap/Button'

and you need to install bootstrap css and import it:

1.

npm install bootstrap

2.

import "bootstrap/dist/css/bootstrap.min.css"

answered Aug 16, 2019 at 7:03

adel

3,5051 gold badge10 silver badges20 bronze badges

3 Comments

Joy Over a year ago

Error is: TypeError: Object doesn't support property or method 'createContext' ./node_modules/react-bootstrap/es/ThemeProvider.js

adel Over a year ago

@Joy i think this error come from your react and react-dom version try to upgrade them and try again! use npm update react react-dom

Joy Over a year ago

It's solved after I created a new project with create-react-app. Thanks a ton for the help mate !!

Alweena Iqbal · Accepted Answer · 2021-03-18 13:23:49Z

0

When you are importing a Button or any component wrapped around with curly braces, you do not need to include the component name after the backslash.

simply put

import {Button} from 'react-bootstrap/';

when we import a component without wrapped around with {}, we need to give the component name like this.

import Button from 'react-bootstrap/Button';

answered Mar 18, 2021 at 13:23

Alweena Iqbal

12 bronze badges

Collectives™ on Stack Overflow

Cannot import components from react-bootstrap

3 Answers 3

8 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related