React-Bootstrap 1.1.1 throwing TypeScript error Declaration of statement expected

[overtureweb]

Describe the bug

Project fails to compile: TypeScript error in /Users/alexwarner/PhpstormProjects/test-project/node_modules/react-bootstrap/esm/index.d.ts(5,1):
Declaration or statement expected. TS1128

To Reproduce

Steps to reproduce the behavior:

1. Use CRA to setup new React project
2. Install react-bootstrap npm install react-bootstrap bootstrap
3. Import any bootstrap component: import {Form} from "react-bootstrap"
4. When the app compiles the above error is thrown

Screenshots

Environment (please complete the following information)

• Operating System: [e.g. macOS 10.15.5]
• Browser, Version [Firefox 77]
• React-Bootstrap Version [1.1.1]

Additional context

See screenshot above, in the index.d.ts file included in the RB package my code linter is flagging errors on any line using the syntax,export type { AccordionProps } from './Accordion';

[jquense]

what version of typescript are you using?

[overtureweb]

Sorry "typescript": "^3.7.5" is in the package.json

[jquense]

type imports were added in typescript 3.8, upgrade and it should be fixed

[overtureweb]

Thanks so much for your help. Forgive me if this was already included in the documentation but if not, perhaps it would be helpful to add this. 1.0.1 -> 1.1.1 is a minor release but now has breaking changes. But then again maybe most developers are already using TS 3.8+

[jquense]

The breaking changes are only in the type definitions, which isn't something we can guarentee won't break between any version just because of how typescript works. This generally how DT type definitions work as well (and typescript itself). Code that worked in 1.0.1 will all still work in 1.1.0 but you may get a new TS error. We try our best to prevent it but sometimes it's not possible, especially when the type was wrong previously

[gtrj55]

I also get this error, but solution is different , i imported like this : import {Button} from 'react-bootstrap/Button', so this give me an error so i changed the way of writing =import Button from 'react-bootstrap/Button', this work for me,

[Salzian]

Maybe some additional info since I see you use some JetBrains product. When I was using WebStorm's build-in React App template, it defaulted to use an outdated version 3.7.x of typescript. You'll need to manually bump the version then.

[jefelewis]

type imports were added in typescript 3.8, upgrade and it should be fixed

This worked for me. My TypeScript version was 3.7.X and I just upgraded to 3.9.X, which fixed the error.

[salarease]

type imports were added in typescript 3.8, upgrade and it should be fixed

Thanks for this. You save my life ;)

[SolucionARG]

I'm still having this problem and I have 3.9.7. I try with a new project, just adding import Container from 'react-bootstrap'; creates the error.

[bpolzar]

I'm still having this problem and I have 3.9.7. I try with a new project, just adding import Container from 'react-bootstrap'; creates the error.

For those using VS Code, make sure that your workspace / project version are accurate and not just the editor version. I struggled for a minute wondering what was going on until I checked my package.json file and saw that version was only 3.7.X though my editor was using 3.9.X. Upgrading the version fixed the issue.

[RagibHossain]

I'm still having this problem and I have 3.9.7. I try with a new project, just adding import Container from 'react-bootstrap'; creates the error.

For those using VS Code, make sure that your workspace / project version are accurate and not just the editor version. I struggled for a minute wondering what was going on until I checked my package.json file and saw that version was only 3.7.X though my editor was using 3.9.X. Upgrading the version fixed the issue.

Do you just change the 3.7.X to 3.9.X in package.json file manually. I have installed the latest typescript version but still same problem .

[SolucionARG]

sorry, I'm kind of new in react. You are right, the package.json file is still 3.7.5 but I don't know how to upgrade it, would you help me? Thanks for your attention.

[RagibHossain]

sorry, I'm kind of new in react. You are right, the package.json file is still 3.7.5 but I don't know how to upgrade it, would you help me? Thanks for your attention.

Bro, have you installed 3.9.7 using (npm install -g typescript@latest) this command?

[SolucionARG]

sorry, I'm kind of new in react. You are right, the package.json file is still 3.7.5 but I don't know how to upgrade it, would you help me? Thanks for your attention.

Bro, have you installed 3.9.7 using (npm install -g typescript@latest) this command?

yes, after that I created a new project using create-react-app but the json of thay new one still shows 3.7.5

[RagibHossain]

sorry, I'm kind of new in react. You are right, the package.json file is still 3.7.5 but I don't know how to upgrade it, would you help me? Thanks for your attention.
Bro, have you installed 3.9.7 using (npm install -g typescript@latest) this command?

yes, after that I created a new project using create-react-app but the json of thay new one still shows 3.7.5

bro i am having the same problem. But I solved it in a different a way . Whatever component you are importing from React-Bootstrap import it this way. For e.g if you are importing Button (import Button from "react-bootstrap/Button") instead of
( import {Button} from "react-bootstrap") . Let me know if this solves the problem

[SolucionARG]

Great! It works perfect importing that way. Thanks a lot for your help.

[OfirD1]

@SolucionARG, @RagibHossain, after changing typescript's version in your package.json to 3.9.X, you should also run npm install in your project directory, and you're all set.

[ghwlchlaks]

Great! thanks a lot for you help!

1. node_modules/typescript remove
2. package.json "typescript": 3.7.3 remove
3. typescript reinstall => npm install typescript

[dkryshtopenko]

type imports were added in typescript 3.8, upgrade and it should be fixed

God bless you