Type 'Element' is not assignable to type 'ReactNode'. Property 'children' is missing in type 'Element' but required in type 'ReactPortal'.ts(2322)

Question

I want to create the navbar by using react-bootstrap I put the code as below in src\components\header.tsx which want to make header as component :

import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';

function BasicExample() {
  return (
    <Navbar expand="lg" className="bg-body-tertiary">
      <Container>
        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="me-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.3">Something</NavDropdown.Item>                  
            </NavDropdown>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

export default BasicExample;

but it return the error on navbar.brand or container

Type 'Element' is not assignable to type 'ReactNode'.
  Property 'children' is missing in type 'Element' but required in type 'ReactPortal'.ts(2322)
index.d.ts(207, 9): 'children' is declared here.
index.d.ts(1466, 9): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & { ...; }, BsPrefixProps<...> & NavbarProps> & BsPrefixProps<...> & NavbarProps & { ...; }'

can I know what's wrong inside

Answer 1

Approach 1: Enable esModuleInterop

I also had this problem. Just add esModuleInterop to tsconfig.json file or if exists, turn on this property as follows:

{
    "compilerOptions": {
      "module": "esnext",
      "target": "es5",
      "lib": ["es6", "dom"],
      "sourceMap": true,
      "allowJs": true,
      "jsx": "react-jsx",
      "moduleResolution": "node",
      "noImplicitAny": false,
      "esModuleInterop": true,
    },
    "include": ["src"]
  }

According to official typescript documentation

By default (with esModuleInterop false or not set) TypeScript treats CommonJS/AMD/UMD modules similar to ES6 modules.

It's highly recommended to enable this option if you're working with third-party libraries that use CommonJS or AMD modules.

Approach 2: Update @types/react

you can update your @types/react package to the latest version, which may also resolve the error.