Menu
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>
790
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
193
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
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
