Closed
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
I'm trying to upgrade a project with react-bootstrap and TypeScript to React 19.
Dependencies:
typescript@5.7.2react-bootstrap@2.10.6react@18.3.1->19.0.0react-dom@18.3.1->19.0.0@types/react@18.3.12->19.0.1@types/react-dom@18.3.1->19.0.2
Several new type errors are being thrown. I believe these are caused by incompatibilities with the new versions of @types/react@19 and/or @types/react-dom@19.
node_modules/@restart/ui/esm/Button.d.ts:13:21 - error TS2503: Cannot find namespace 'JSX'.
13 tagName?: keyof JSX.IntrinsicElements;
~~~
node_modules/@restart/ui/esm/Button.d.ts:38:16 - error TS2503: Cannot find namespace 'JSX'.
38 as?: keyof JSX.IntrinsicElements | undefined;
~~~
node_modules/@restart/ui/esm/types.d.ts:3:43 - error TS2503: Cannot find namespace 'JSX'.
3 export type IntrinsicElementTypes = keyof JSX.IntrinsicElements;
~~~
node_modules/react-bootstrap/esm/Dropdown.d.ts:6:18 - error TS2320: Interface 'DropdownProps' cannot simultaneously extend types 'DropdownProps' and 'Omit<HTMLAttributes<HTMLElement>, "children" | "onSelect">'.
Named property 'onToggle' of types 'DropdownProps' and 'Omit<HTMLAttributes<HTMLElement>, "children" | "onSelect">' are not identical.
6 export interface DropdownProps extends BaseDropdownProps, BsPrefixProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect' | 'children'> {
~~~~~~~~~~~~~
node_modules/react-bootstrap/esm/Image.d.ts:2:23 - error TS7016: Could not find a declaration file for module 'prop-types'. '/home/projects/node-mkwgd4bm/node_modules/prop-types/index.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/prop-types` if it exists or add a new declaration (.d.ts) file containing `declare module 'prop-types';`
2 import PropTypes from 'prop-types';
~~~~~~~~~~~~
node_modules/react-bootstrap/esm/Navbar.d.ts:4:18 - error TS2430: Interface 'NavbarProps' incorrectly extends interface 'Omit<HTMLAttributes<HTMLElement>, "onSelect">'.
Types of property 'onToggle' are incompatible.
Type '((expanded: boolean) => void) | undefined' is not assignable to type 'ToggleEventHandler<HTMLElement> | undefined'.
Type '(expanded: boolean) => void' is not assignable to type 'ToggleEventHandler<HTMLElement>'.
Types of parameters 'expanded' and 'event' are incompatible.
Type 'ToggleEvent<HTMLElement>' is not assignable to type 'boolean'.
4 export interface NavbarProps extends BsPrefixProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
~~~~~~~~~~~
node_modules/react-bootstrap/esm/Ratio.d.ts:5:21 - error TS2694: Namespace 'React' has no exported member 'ReactChild'.
5 children: React.ReactChild;
~~~~~~~~~~
node_modules/react-bootstrap/esm/Tab.d.ts:1:23 - error TS7016: Could not find a declaration file for module 'prop-types'. '/home/projects/node-mkwgd4bm/node_modules/prop-types/index.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/prop-types` if it exists or add a new declaration (.d.ts) file containing `declare module 'prop-types';`
1 import PropTypes from 'prop-types';
~~~~~~~~~~~~
node_modules/react-bootstrap/esm/TabContainer.d.ts:2:23 - error TS7016: Could not find a declaration file for module 'prop-types'. '/home/projects/node-mkwgd4bm/node_modules/prop-types/index.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/prop-types` if it exists or add a new declaration (.d.ts) file containing `declare module 'prop-types';`
2 import PropTypes from 'prop-types';
~~~~~~~~~~~~
node_modules/react-bootstrap/esm/Tabs.d.ts:2:23 - error TS7016: Could not find a declaration file for module 'prop-types'. '/home/projects/node-mkwgd4bm/node_modules/prop-types/index.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/prop-types` if it exists or add a new declaration (.d.ts) file containing `declare module 'prop-types';`
2 import PropTypes from 'prop-types';
~~~~~~~~~~~~
node_modules/react-bootstrap/esm/createUtilityClasses.d.ts:1:23 - error TS7016: Could not find a declaration file for module 'prop-types'. '/home/projects/node-mkwgd4bm/node_modules/prop-types/index.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/prop-types` if it exists or add a new declaration (.d.ts) file containing `declare module 'prop-types';`
1 import PropTypes from 'prop-types';
~~~~~~~~~~~~
node_modules/react-bootstrap/esm/types.d.ts:1:23 - error TS7016: Could not find a declaration file for module 'prop-types'. '/home/projects/node-mkwgd4bm/node_modules/prop-types/index.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/prop-types` if it exists or add a new declaration (.d.ts) file containing `declare module 'prop-types';`
1 import PropTypes from 'prop-types';
~~~~~~~~~~~~
Found 12 errors in 11 files.
Errors Files
2 node_modules/@restart/ui/esm/Button.d.ts:13
1 node_modules/@restart/ui/esm/types.d.ts:3
1 node_modules/react-bootstrap/esm/Dropdown.d.ts:6
1 node_modules/react-bootstrap/esm/Image.d.ts:2
1 node_modules/react-bootstrap/esm/Navbar.d.ts:4
1 node_modules/react-bootstrap/esm/Ratio.d.ts:5
1 node_modules/react-bootstrap/esm/Tab.d.ts:1
1 node_modules/react-bootstrap/esm/TabContainer.d.ts:2
1 node_modules/react-bootstrap/esm/Tabs.d.ts:2
1 node_modules/react-bootstrap/esm/createUtilityClasses.d.ts:1
1 node_modules/react-bootstrap/esm/types.d.ts:1
Expected behavior
No type errors.
To Reproduce
- Install
typescript,react-bootstrap,react,react-dom,@types/react, and@types/react-dom. - Create
tsconfig- exact settings don't matter, but include"jsx": "react-jsx" - Create example file and import from
react-bootstrap - Run
tscand build will fail
Reproducible Example
https://stackblitz.com/edit/node-mkwgd4bm
What version of React-Bootstrap are you using?
2.10.6
Workaround
Turn on skipLibCheck and the build will still pass, and everything appears to work the same.