'React-Bootstrap - Card Component cannot be imported & Cannot install peer dependencies

I've been using react-bootstrap and so far most components are working except the Card component, and this is the error I've been getting:

Attempted import error: 'Card' is not exported from 'react-bootstrap'.

import React, {Component} from "react"
import {Button} from 'react-bootstrap'
import Card from "react-bootstrap/Card";

export default class NewsCard extends Component {
    render() {
        return (
            <div>
                <Card style={{ width: '18rem' }}>
                <Card.Img variant="top" src="holder.js/100px180" />
                <Card.Body>
                    <Card.Title>Card Title</Card.Title>
                    <Card.Text>
                    Some quick example text to build on the card title and make up the bulk of
                    the card's content.
                    </Card.Text>
                    <Button variant="primary">Go somewhere</Button>
                </Card.Body>
                </Card>
            </div>
        )
        }
    }

When I install React-Bootstrap, I get this warning error also so the Card Component is missing from the dependency:

npm WARN [email protected] requires a peer of react-bootstrap@^0.30.7 but none is installed. You must install peer dependencies yourself.

Has anyone else encountered this issue or can lead me to the right direction? thanks

reactjs react-bootstrap

Solution 1:^[1]

It's because Card only exists in the 1.0.0 beta version. You are using 0.32.4.

Solution 2:^[2]

The documentation for react-bootstrap looks like you also need to have bootstrap installed. I've got it working with the following import statement. Make sure youre importing Card and not { Card } when using the "react-bootstrap/Card" import statement.

import Card from "react-bootstrap/Card";
import ReactDOM from "react-dom";
import React, { Component } from "react";

class Todo extends Component {
  render() {
    return (
      <Card>
        <Card.Body>This is some text within a card body.</Card.Body>
      </Card>
    );
  }
}

ReactDOM.render(<Todo />, document.getElementById("root"));

Solution 3:^[3]

Thanks for this:

import Card from "react-bootstrap/Card";

It's the little things!

npm install --save react-bootstrap bootstrap

Solution 4:^[4]

You can directly use the custom react elements made by react.

There is a module named reactstrap

install it as

npm install reactstrap

and use it by importing

import {Card, CardText, CardBody, CardTitle, CardSubtitle, CardImg} from 'reactstrap';

The whole code becomes

import React, { Component } from 'react';
import {Card, CardText, CardBody, CardTitle, CardSubtitle, CardImg} from 'reactstrap';

import ss from '../../ss.png';

class HomePage extends Component{

    render(){
        return(
            <div>
                <Card >
                <CardImg style={{width:'18rem' }} variant="top" src={ss}/>
                <CardBody>
                    <CardTitle>Card Title</CardTitle>
                    <CardText>
                    Some quick example text to build on the card title and make up the bulk of the card's content.
                    </CardText>
                    <button >Go somewhere</button>
                </CardBody>
                </Card>

                <Card>
  <CardBody>This is some text within a card body.</CardBody>
</Card>

            </div>
        )
    }


}

export default HomePage;

This works.

Solution 5:^[5]

I had a similar problem, with this error:

export 'carddeck' (imported as 'carddeck') was not found in 'react-bootstrap'

ante the problem was that whenever I do npm install react-bootstrap [email protected] it will install react-bootstrap version: 2.1.2 which is not fully compatible with [email protected].

So the solution is npm uninstall react-bootstrap bootstrap if you already installed react-bootstrap and bootstrap before and force the installation of the 1.6.4 version by

npm install [email protected] [email protected]

I also experienced problems with the accordions because of the same versions mix problems.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Pierrick
Solution 2	Oscar W
Solution 3	user12656167
Solution 4	Shashank Prasad
Solution 5	Ingrid Oncken

'React-Bootstrap - Card Component cannot be imported & Cannot install peer dependencies

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]