Warning: Failed prop type: Invalid prop reactRouterLinkComponent of type object supplied

[slawler-telus]

Description

• Link, ButtonLink and ChevronLink all produce warnings when using reactRouterLinkComponent.
  VM2549:1 Warning: Failed prop type: Invalid prop reactRouterLinkComponentof typeobjectsupplied toLink, expected function.

Reproduction Steps

          import ButtonLink from '@tds/core-button-link'
          import { Link as ReactRouterLink } from 'react-router-dom'

          <ButtonLink
            variant={"primary"}
            target={"_self"}
            to={"/my-app"}
            reactRouterLinkComponent={ReactRouterLink}
          >
            {children}
          </ButtonLink>

Workaround details

Ignore errors

Recommendation

Meta

• core-chevron-link: v2.1.8
• core-button-link: v2.1.10
• core-link: v2.1.3
• react-router-dom: v5.0.0
• Our code: https://github.com/telus/my-telus-rewards/blob/staging/app/src/ui/components/MultiLink/index.jsx#L148
• Willing to develop solution: Yes/No

Screenshots

[jraff]

This issue is due to the Link component in react-router v5 now exporting as a forwardRef.

Our previous propType check was a PropTypes.func which works for all components except those that use forwardRef. forwardRef still creates a component but in the form of an object as pointed out in this PR. facebook/prop-types#211. We could look to implement this new proptype but that would require us to update all prop-types to v15.7.0. Resulting in something like this

reactRouterLinkComponent: PropTypes.elementType,

The option would be to not upgrade prop-types and change the current proptype to

reactRouterLinkComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),

[marcod1419]

This issue has been resolved in the newest releases of Link, ChevronLink, ButtonLink and Breadcrumbs.

Release notes:

• https://github.com/telus/tds-core/releases/tag/%40tds%2Fcore-link%402.2.5
• https://github.com/telus/tds-core/releases/tag/%40tds%2Fcore-chevron-link%402.1.15
• https://github.com/telus/tds-core/releases/tag/%40tds%2Fcore-button-link%402.1.15
• https://github.com/telus/tds-core/releases/tag/%40tds%2Fcore-breadcrumbs%402.2.2

Thanks for reporting!