How to use react-bootstrap in typescript project

Question

I am trying to make a nav bar using react-bootstrap I have installed the node-module which is "@types/react-bootstrap": "^0.32.11", and I want to use in my hello.tsx component but it shows compile error Module not found: Error: Can't resolve 'react-bootstrap' in:\Query Express\Portal\src\components' I don't understand why it is looking for react-bootstrap in component directory

import * as React from "react";
import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from "react-bootstrap";

export interface IHelloProps { compiler: string; framework: string; }

// 'helloProps' describes the shape of props.
// state is never set so we use the '{}' type.
export class Hello extends React.Component<IHelloProps, {}> {
    render() {
        return(
        <div>
            <Navbar inverse>
  <Navbar.Header>
    <Navbar.Brand>  
      <a href="#brand">React-Bootstrap</a>
    </Navbar.Brand>
    <Navbar.Toggle />
  </Navbar.Header>
  <Navbar.Collapse>
    <Nav>
      <NavItem eventKey={1} href="#">
        Link
      </NavItem>
      <NavItem eventKey={2} href="#">
        Link
      </NavItem>
      <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
        <MenuItem eventKey={3.1}>Action</MenuItem>
        <MenuItem eventKey={3.2}>Another action</MenuItem>
        <MenuItem eventKey={3.3}>Something else here</MenuItem>
        <MenuItem divider />
        <MenuItem eventKey={3.3}>Separated link</MenuItem>
      </NavDropdown>
    </Nav>
    <Nav pullRight>
      <NavItem eventKey={1} href="#">
        Link Right
      </NavItem>
      <NavItem eventKey={2} href="#">
        Link Right
      </NavItem>
    </Nav>
  </Navbar.Collapse>
</Navbar>
        <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>;                                                                                                                                                            
        </div>
        )}
}

Index.html

  <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
    </head>
    <body>
        <div id="app"></div>

        <!-- Main -->
        <link href="./src/css/lib/_bootstrap.min.css" rel="stylesheet"></link>
        <script src="./dist/main.bundle.js"></script>
        <script src="./dist/nodeModules.bundle.js"></script>
    </body>
</html>

Have you included react-bootstrap in your project? npm i react-bootstrap — SharpCode
– SharpCode, Commented Jul 24, 2018 at 6:21
Posted answer, you only installed the definitions not the actual package — SharpCode
– SharpCode, Commented Jul 24, 2018 at 6:28

SharpCode · Accepted Answer · 2018-07-24 06:28:30Z

7

This error usually occurs when the node module is not found or possibly incorrectly installed. So in the case that it is not found or available run the following command npm i react-bootstrap and then make sure it is in your package.json listed under dependencies.

If this still doesn't work delete the package-lock.json file and run npm i to install all the packages again. Make sure react-bootstrap is in dependencies before doing so otherwise do npm i react-bootstrap first then npm i

answered Jul 24, 2018 at 6:28

SharpCode

1,4853 gold badges13 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Akash Vishwakarma Over a year ago

The code is getting compiled but I didn't see any nav bar, I have also linked the <link href="./src/css/lib/_bootstrap.min.css" rel="stylesheet"></link> in my html

SharpCode Over a year ago

@AkashVishwakarma try add the cdn link from react-bootstrap.github.io/getting-started/introduction instead and see if it work. Not sure what bundler you are using but could be that ./src/css/lib/_bootstrap.min.css isn't getting loaded or possibly your bundler isn't setup correctly

Vanderley Maia · Accepted Answer · 2021-01-18 19:42:39Z

7

In my case, I just added this line to my index.tsx and after that works just fine:

import 'bootstrap/dist/css/bootstrap.min.css';

but before that you need to install the libraries, using this command: npm i react-bootstrap bootstrap

answered Jan 18, 2021 at 19:42

Vanderley Maia

4955 silver badges7 bronze badges

1 Comment

nights Over a year ago

I had the same issue and adding your line solved it, thanks!

Collectives™ on Stack Overflow

How to use react-bootstrap in typescript project

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related