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

Viewed 8497

Error message: Failed to compile. ./src/App.js Module not found: Can't resolve 'react-bootstrap' in 'D:\Study\React\projects\search-app\src'

index.js

import React from "react";
import ReactDOM from "react-dom";
import "bootstrap/dist/css/bootstrap.css";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

serviceWorker.unregister();

App.js:

import React, { Component } from "react";
import { Container, Jumbotron } from "react-bootstrap";

class App extends Component {
  render() {
    return (
      <div>
        <Jumbotron>
          <Container>
            <h1>Search App</h1>
            <p>This is a simple search app</p>
          </Container>
        </Jumbotron>
      </div>
    );
  }
}
export default App;
1 Answers

the right syntax of importing a component in react-bootstrap is the following :

import componentName from 'react-bootstrap/componentName '

so in your case you should do :

import Container from 'react-bootstrap/Container'
import Jumbotron from 'react-bootstrap/Jumbotron'

you could check the official API

Related