Typescript error after using React-bootstrap Navbar. How to resolve and use React-bootstrap import?

Question

I am trying to use a Navbar component of React Bootstrap and when compiling the code the following error appears:

Failed to compile.

C:/Users/Guilherme/vscode-workspace-general/tasks/frontend/node_modules/react-bootstrap/esm/index.d.ts
TypeScript error in C:/Users/Guilherme/vscode-workspace-general/tasks/frontend/node_modules/react-bootstrap/esm/index.d.ts(2,1):
Declaration or statement expected.  TS1128

    1 | export { default as Accordion } from './Accordion';
  > 2 | export type { AccordionProps } from './Accordion';
      | ^
    3 | export { default as AccordionContext } from './AccordionContext';
    4 | export { default as AccordionCollapse } from './AccordionCollapse';
    5 | export type { AccordionCollapseProps } from './AccordionCollapse';

This is the component that is using Navbar:

import React from 'react'
import { Button, Form, FormControl, Nav, Navbar, NavDropdown } from 'react-bootstrap'

export const NavBar: React.FC = () => {
  return (
    <Navbar bg="light" expand="lg">
      <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="mr-auto">
          <Nav.Link href="#home">Home</Nav.Link>
          <Nav.Link href="#link">Link</Nav.Link>
          <NavDropdown title="Dropdown" id="basic-nav-dropdown">
            <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
            <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
            <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
            <NavDropdown.Divider />
            <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
          </NavDropdown>
        </Nav>
        <Form inline>
          <FormControl type="text" placeholder="Search" className="mr-sm-2" />
          <Button variant="outline-success">Search</Button>
        </Form>
      </Navbar.Collapse>
    </Navbar>
  )
}

I’m using React with Typescript. The exact same error occurs with any component of the React-bootstrap. When I create a component from scratch using html tags the application compiles normally.

Answer 1

I solved the problem. I upgraded Typescript to Latest, then added @types/React and @types/React-dom as devDependency... Typescript version before update was 3.7.3, then 4.0.3.