react-bootstrap-typescript icon indicating copy to clipboard operation
react-bootstrap-typescript copied to clipboard

How to import specific component from react-bootstrap with Typescript

Open iamsaksham opened this issue 7 years ago • 1 comments

Earlier my app was in ReactJs + React-bootstrap. Now I'm using Typescript + ReactJs + React-bootstrap

To reduce the size of the app for production Earlier I used to import react-bootstrap components using - import Button from 'react-bootstrap/lib/Button'

After adding Typescript it shows the following error

ERROR in [at-loader] ./components/Hello.tsx:6:8 TS1192: Module ''react-bootstrap/lib/Button'' has no default export.

Attempt 1

import {Button} from 'react-bootstrap/lib/Button' but in this case Button is undefined.

Attempt 2

import * as Button from 'react-bootstrap/lib/Button' but in this case another error pops out

ERROR in [at-loader] ./components/Hello.tsx:54:12 TS2604: JSX element type 'Button' does not have any construct or call signatures.

This error shows error in line <Button bsStyle="danger" bsClass="glyphicon glyphicon-new-window"></Button>

Though import {Button} from 'react-bootstrap' works fine but this is not desired because it results in increasing the size of the app by 200kbs for me.

How can we import specific component from react-bootstrap using Typescript??

iamsaksham avatar Apr 11 '17 12:04 iamsaksham

I have the same issue, any luck?

JapinderSandhu avatar Jul 10 '20 20:07 JapinderSandhu