CODEWITHSUNDEEP
reactjsreact-routernavbarreact-bootstrap
Saachi Sharma
Saachi Sharma

Reputation: 1

Module not found: Can't resolve 'react-bootstrap/Navbar'

I keep getting this error despite having tried to install react-bootstrap, reactstrap, adding the scripts and imports from react-bootstrap documentation.

I have tried : npm i react-bootstrap --save

And: npm install react-bootstrap bootstrap

I have created a similar project with this same component and it works perfectly fine, I don't understand why it won't work in this project.

This is the component file:

import React from 'react';
import './Header.css'
import Navbar from 'react-bootstrap/Navbar'
import {Container} from "reactstrap";
import 'bootstrap/dist/css/bootstrap.min.css';
import { NavLink } from 'react-router-dom';

const Navigation = () =>{
    return(
        <div className="header">
        <Navbar bg="dark" variant="dark"  expand="lg">
            <Container>
                <Navbar.Brand href="#home"><NavLink to="/">Home</NavLink></Navbar.Brand>
                <Navbar.Brand href="#about"><NavLink to="/catallaxy">Catallaxy</NavLink></Navbar.Brand>
                <Navbar.Brand href="#home"><NavLink to="/events">Events</NavLink></Navbar.Brand>
                <Navbar.Brand href="#about"><NavLink to="/about">About Us</NavLink></Navbar.Brand>
                <Navbar.Brand href="#contact"><NavLink to="/contact">Gallery</NavLink></Navbar.Brand>
            </Container>
        </Navbar>
        </div>
    )
}
export default Navigation;

Upvotes: 0

Views: 9509

Answers (3)

Abdullah
Abdullah

Reputation: 2973

I was facing same issue Error

Solution:

import { Container, Navbar } from "react-bootstrap";

Note: Make sure you already installed the below package:

npm i --save react-bootstrap

Result:

result

Upvotes: 0

Deepak Gupta
Deepak Gupta

Reputation: 658

react-bootstrap and reactstrap are almost same things and they provide same components. Just use one of them and import both Navbar and Container.

import {Container, Navbar} from "react-bootstrap"

Upvotes: 0

Jay
Jay

Reputation: 3050

I wanted to put this as a comment, as it is a simple and quick solution, but code cannot be formatted there.

import React from 'react';
import './Header.css'
import {Container, Navbar } from "reactstrap"; //this line here is the solution.
import 'bootstrap/dist/css/bootstrap.min.css';
import { NavLink } from 'react-router-dom';

and your package.json should have reactstrap like this.

  "dependencies": {
    "classnames": "2.2.6",
    "moment": "2.26.0",
    "node-sass": "4.14.1",
    "nouislider": "14.5.0",
    "react": "16.13.1",
    "react-bootstrap-switch": "15.5.3",
    "react-datetime": "2.16.3",
    "react-dom": "16.13.1",
    "react-router": "5.2.0",
    "react-router-dom": "5.2.0",
    "react-scripts": "3.4.1",
    "reactstrap": "8.4.1". <------- here
  }

this is what usually works. here is a reference link of a working navbar - https://github.com/Jay-study-nildana/RandomStuffReactJSApp/blob/master/src/components/Navbars/IndexNavbar.js

Upvotes: 0

Related Questions