CODEWITHSUNDEEP
reactjstypescriptnpmreact-bootstrap
zitrusire2520
zitrusire2520

Reputation: 179

react-bootstrap module has no exported members

I want to use the npm module react-bootstrap (https://www.npmjs.com/package/@types/react-bootstrap) in my Layout component (as the ASP.NET Core 2.1 template client project also has). But the file extension in the template is .js. I'd like to use Typescript, so Layout.tsx looks like this:

import * as React from 'react';
import { Col, Grid, Row } from 'react-bootstrap/';           <----- compile time error: Module has no exported member col / grid / row
import NavMenu from './NavMenu';

interface Layout {
    children: any;
}

const Layout = ({ children }) => {
    return (<Grid fluid>
        <Row>
            <Col sm={3}>
                <NavMenu/>
            </Col>
            <Col sm={9}>
                {this.props.children}
            </Col>
        </Row>
    </Grid>);
}
export default Layout;

My package.json file looks like this:

{
  "name": "MyApp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@stitches/react": "^1.2.5",
    "@types/react-bootstrap": "^0.32.28",
    "@types/react-dom": "^17.0.11",
    "@types/react-router": "^5.1.17",
    "@types/react-router-bootstrap": "^0.24.5",
    "bootstrap": "^3.4.1",
    "react": "^17.0.2",
    "react-beautiful-dnd": "^13.1.0",
    "react-bootstrap": "^2.0.2",
    "react-dom": "^17.0.2",
    "react-router": "^6.0.0",
    "react-router-bootstrap": "^0.24.4",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.0.17",
    "rimraf": "^2.6.2"
  },
  "scripts": {
    "start": "rimraf ./build && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "@types/react": "^17.0.34",
    "css-loader": "^6.5.1",
    "style-loader": "^3.3.1"
  }
}

I have also imported 'bootstrap/dist/css/bootstrap.css' and 'bootstrap/dist/css/bootstrap-theme.css' in index.tsx.

Further information:

Does anyone know where the problem might be? I'm new to React, so thx for your support!

Upvotes: 2

Views: 1891

Answers (1)

Ahmet Emre Kilinc
Ahmet Emre Kilinc

Reputation: 6925

react-bootstrap does not have a Grid component, instead it has Container component. Other than that, you should not use this.props.children in a functional component. So, your code should be like this:

import React from 'react';
import Col from "react-bootstrap/Col";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import NavMenu from './NavMenu';

interface Layout {
    children: any;
}

const Layout = ({ children }) => {
    return (<Container fluid>
        <Row>
            <Col sm={3}>
                <NavMenu/>
            </Col>
            <Col sm={9}>
                {children}
            </Col>
        </Row>
    </Container>);
}
export default Layout;

You can take a look at this sandbox for a live working example.

Upvotes: 1

Related Questions