尝试导入错误：'Jumbotron 未从'react-bootstrap'导出（导入为'Jumbo'）

Question

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.

Answer 1

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

Answer 2

 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; }

Answer 3

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.

Answer 4

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.

Answer 5

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

Answer 6

我知道我的回复可能对你来说迟了，但它会帮助其他人......你可以在新版本的引导程序中使用它的 className 而不是它的组件

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