Attempted import error: 'Jumbotron is not exported from 'react-bootstrap' (imported as 'Jumbo')

user_16552819 0
Viewed 10599

I'm getting started learning React and trying to create a Jumbotron element from react-bootstrap. I'm pretty sure I've installed all the correct modules with npm install react-bootstrap bootstrap, but I'm getting a console error that says "Attempted import error: 'Jumbotron is not exported from 'react-bootstrap' (imported as 'Jumbo')". My code is as below:

import React from 'react';
import { Jumbotron as Jumbo, Container } from 'react-bootstrap';
import styled from 'styled-components';
import boatImage from '../assets/boatImage.jpg';

const Styles = styled.div `
  .jumbo {
    background: url(${boatImage}) no-repeat fixed bottom;
    background-size: cover;
    color: #efefef;
    height: 200px;
    position: relative;
    z-index: -2;
  }
  .overlay {
    background-color: #000;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
  }
`;

export const Jumbotron = () => (
  <Styles>
    <Jumbo fluid className="jumbo">
      <div className="overlay"></div>
      <Container>
        <h1>My App</h1>
        <p>Hello World</p>
      </Container>
    </Jumbo>
  </Styles>
)

And here is my package.json:

{
  "name": "landing-page",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "bootstrap": "^5.0.2",
    "husky": "^7.0.1",
    "lint-staged": "^11.1.1",
    "prettier": "^2.3.2",
    "react": "^17.0.2",
    "react-bootstrap": "^2.0.0-beta.4",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "styled-components": "^5.3.0",
    "web-vitals": "^1.1.2"
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --write"
    ]
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "devDependencies": {
    "@babel/core": "^7.14.8"
  }
}

Am I importing it wrong somehow? Or is there some dependency issue? Everything else from react-bootstrap appears to be working properly. Thanks in advance.

react-bootstrap node.js javascript
6 Answers

JumboTron doesnt work in bootstrap 5, so if you installed the latest version following the guide on https://react-bootstrap.github.io/, you have the newer version of react-bootstrap.

I saw you followed the tutorial from Brice Ayres he uses bootstrap 4.3.1

here's information on what you can do: https://getbootstrap.com/docs/5.0/migration/#jumbotron

Edit 1: Basically, drop the Jumbotron, make your and own header using react-bootstrap your own css. Its very easy

user_99703040

Kindly uninstall the bootstrap by doing npm uninstall react-bootstrap bootstrap then install it again with the command npm install react-bootstrap bootstrap@4.6.0 Major versions of Bootstrap tend not be be very backwards compatible with each other. This should work.

user_98132300 

U won't be able to use Jumbotron as it is no longer available in the latest Bootstrap 5 
import {Jumbotron} from  "reactstrap";  in Home.js won't work if u have the latest Bootstrap as it was removed.
Add the below CSS in App.css file  and insted of using <Jumbotron></Jumbotron> use <div class="jumbotron">

.container-fluid .jumbotron, .container .jumbotron {
  border-radius: 6px;
  padding-left: 15px;
  padding-right: 15px;
}

@media screen and (min-width: 768px)
{
.container-fluid .jumbotron, .container .jumbotron {
    padding-left: 60px;
    padding-right: 60px;
}
}

@media screen and (min-width: 768px)
{
.jumbotron {
    padding-bottom: 48px;
    padding-top: 48px;
}
}

.jumbotron {
  background-color: #eee;
  padding-left: 60px;
  padding-right: 60px;
  margin-bottom: 30px;
  padding-bottom: 30px;
  padding-top: 30px;
}

user_184656750

Jumbotron is part of react-bootstrap v3.3.x which uses React.

It is not part of react-bootstrap 2.0.0-beta.4 which you are using and which is based on a much older major version of Bootstrap.

(Major versions of Bootstrap tend not be be very backwards compatible with each other.

Dorward_190680

Jumbotron doesn't work in bootstrap 5. So If you have install latest version of bootstrap, you can either revert back to lower version. However if you wish to continue with this version you can use following code snippet:

<div class="container-fluid bg-light text-dark p-5">
  <div class="container bg-light p-5">
    <h1 class="display-4 fw-bold">Welcome to Admin Dashboard</h1>
    <hr>
      <p>Go to My Website</p>
      <a href="#" class="btn btn-primary">link</a>
  </div>
</div>

Also go to this link and use "inspect element" feature to make modifications in above code snippet as per you need. Jumbotron Example

user_134578510

I know that my response maybe late for you but it would help other people... you can use its className instead of its component in the new version of bootstrap

<div className="jumbotron">.....</div>
user_32368380
Related