react-bootstrap module has no exported members

user_16512632 0
Viewed 689

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:

  • ECMAScript version: ECMAScript 2017
  • JSX compilation in TSX files: React
  • Module System: ES2015

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

react-bootstrap npm typescript reactjs
1 Answers

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.

user_73994780
Related