Search code examples
reactjsreact-bootstrap

React bootstrap Carousels component not working up getting error

React-bootstrap Carousels not working

import React from 'react'; import Carousel from 'react-bootstrap';

class HomeSlider extends React.component { render() { return(

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

          <Carousel.Caption>
            <h3>Second slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="holder.js/800x400?text=Third slide&bg=20232a"
            alt="Third slide"
          />

          <Carousel.Caption>
            <h3>Third slide label</h3>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
          </Carousel.Caption>
        </Carousel.Item>
      </Carousel>
    );
}

} export default HomeSlider;

Failed to compile ./src/components/HomeSlider.js Attempted import error: 'react-bootstrap' does not contain a default export (imported as 'Carousel'). This error occurred during the build time and cannot be dismissed.

Solution

  • You need to import like this:

    import Carousel from 'react-bootstrap/Carousel'