react-bootstrap: `as` prop in documentation examples causes Javascript error.

Prerequisites

Describe the bug

Update: a more detailed example can be found here: https://github.com/yinxiangshi/react-bootstrap-example

This is very similar to #6331

Example code:

<Form>
     <Row className="mb-3">
       <Form.Group as={Col} md="6" controlId="validationCustom01">
         <Form.Label>Full name</Form.Label>
        </Form.Group>
       <Form.Group as={Col} md="6" controlId="validationCustom02">
          <Form.Label>Email</Form.Label>
        </Form.Group>
      </Row>
</Form>

We will get the error as same as #6331.

TS2322: Type 'BsPrefixRefForwardingComponent<"div", ColProps>' is not assignable to type '(BsPrefixRefForwardingComponent<"div", ColProps> & keyof IntrinsicElements) | undefined'.

Type 'BsPrefixRefForwardingComponent<"div", ColProps>' is not assignable to type 'BsPrefixRefForwardingComponent<"div", ColProps> & "symbol"'.

Type 'BsPrefixRefForwardingComponent<"div", ColProps>' is not assignable to type '"symbol"'.

helpers.d.ts(9, 5): The expected type comes from property 'as' which is declared here on type 'IntrinsicAttributes & Omit<Omit<any, BsPrefixProps<ElementType<any>> & ColProps> & BsPrefixProps<ElementType<any>> & ColProps & { ...; }, BsPrefixProps<...> & ButtonProps> & BsPrefixProps<...> & ButtonProps & { ...; }'

Expected behavior

No type error.

To Reproduce

As described in the 1st section.

Reproducible Example

As described in the 1st section.

Screenshots

No response

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome

What version of React-Bootstrap are you using?

2.7.2

What version of Bootstrap are you using?

5.3.0

Additional context

No response

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Comments: 16 (6 by maintainers)

Most upvoted comments

Im using JavaScript…

Then why are you raising a typescript issue?