TypeScript error when extending react-bootstrap components

[Hamusutaa]

This only started happening yesterday when 6.0.8 was released. Rolling back to 6.0.7 works as expected with no errors.

Environment

System:

• OS: macOS 13.5.1
• CPU: (10) arm64 Apple M1 Pro
• Memory: 97.67 MB / 16.00 GB
• Shell: 5.9 - /bin/zsh

Binaries:

• Node: 16.15.1 - /usr/local/bin/node
• Yarn: 1.22.19 - ~/.yarn/bin/yarn
• npm: 8.11.0 - /usr/local/bin/npm

npmPackages:

• styled-components: ^6.0.8 => 6.0.8

Reproduction

Unable to reproduce in codesandbox, as this is not a runtime error, it is a TypeScript compilation error:

package.json:

{
  "dependencies": {
    "react": "^17.0.2",
    "react-bootstrap": "^2.8.0",
    "styled-components": "^6.0.8",
    "typescript": "^5.2.2"
  }
}

tsconfig.json:

{
  "compilerOptions": {
    "jsx": "react",
    "skipLibCheck": true,
    "esModuleInterop": true
  }
}

test.tsx:

import React from 'react';
import { Button } from 'react-bootstrap';
import styled from 'styled-components';

const MyComponent = () => {
  return <MyButton>Hello</MyButton>;
};

const MyButton = styled(Button)``;

export default MyComponent;

Steps to reproduce

yarn tsc

Expected Behavior

No errors.

Actual Behavior

test.tsx:6:10 - error TS2590: Expression produces a union type that is too complex to represent.

6   return <MyButton>Hello</MyButton>;
           ~~~~~~~~~~~~~~~~~~~~~~~~~~


Found 1 error in test.tsx:6

[LukeNotable]

Possibly due to a problem on the react-bootstrap side: https://github.com/react-bootstrap/react-bootstrap/issues/6283

[BATCOH]

My current workaround is to add an explict type annotation:

import React, { FC } from 'react';
import { Button, ButtonProps } from 'react-bootstrap';
import styled from 'styled-components';

const MyButton: FC<ButtonProps> = styled(Button)``;

<MyButton variant="primary" />; // No error

[ebroder]

FWIW if you're also passing a ref to your styled component, then I think you can annotate the type as:

import React, { FC, ComponentPropsWithRef } from 'react';
import { Button } from 'react-bootstrap';
import styled from 'styled-components';

const MyButton: FC<ComponentPropsWithRef<typeof Button>> = styled(Button)``;