Description
Prerequisites
- I am using the correct version of React-Bootstrap for my version of Bootstrap
- I have searched for duplicate or closed issues
- I have read the contributing guidelines
Describe the bug
When setting "type": "module" in package.json + "module": "node16" (or nodeNext), "moduleResolution": "node16" in tsconfig, typescript won't work correctly with React-Bootstrap, doing "import x from 'react-bootstrap/x'" will throw "JSX element type 'x' does not have any construct or call signatures."
Typescript will work correctly when using "import { x } from 'react-bootstrap'"
Additional info from https://arethetypeswrong.github.io/?p=react-bootstrap%402.10.2 :
The JavaScript appears to set both module.exports and module.exports.default for improved compatibility, but the types only reflect the latter (by using export default). This will cause TypeScript under the node16 module mode to think an extra .default property access is required, which will work at runtime but is not necessary. These types export = an object with a default property instead of using export default.
CommonJS module simulates a default export with exports.default and exports.__esModule, but does not also set module.exports for compatibility with Node. Node, and some bundlers under certain conditions, do not respect the __esModule marker, so accessing the intended default export will require a .default property access on the default import.
Expected behavior
TS should be able to recognize the export
To Reproduce
No response
Reproducible Example
https://stackblitz.com/edit/vitejs-vite-5mhtbn?file=src%2FApp.tsx
Screenshots
What operating system(s) are you seeing the problem on?
No response
What browser(s) are you seeing the problem on?
No response
What version of React-Bootstrap are you using?
2.10.2
What version of Bootstrap are you using?
5.3.0
Additional context
No response