Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
slawler-telus opened this issue Feb 24, 2020 · 2 comments
Labels
priority: medium Medium priority items to be taken on by the core team or contributors, next in queue. status: completed ✅ An item that has been closed, due to its completion type: defect 🐛 bugs or defects
Milestone

Comments

@slawler-telus
Copy link

slawler-telus commented Feb 24, 2020

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

Screenshots

image
image
image
image

@theetrain theetrain added the status: review needed an item that needs to triaged or looked into label Mar 4, 2020
@triage-new-issues triage-new-issues bot removed the triage label Mar 4, 2020
@varunj90 varunj90 added status: in progress item in progress. and removed status: review needed an item that needs to triaged or looked into labels Mar 23, 2020
@varunj90 varunj90 added this to the March 2020 milestone Mar 23, 2020
@jraff
Copy link
Contributor

jraff commented Mar 23, 2020

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]),

@theetrain theetrain added priority: medium Medium priority items to be taken on by the core team or contributors, next in queue. type: defect 🐛 bugs or defects labels Apr 15, 2020
@theetrain theetrain modified the milestones: March 2020, April 2020 Apr 15, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
priority: medium Medium priority items to be taken on by the core team or contributors, next in queue. status: completed ✅ An item that has been closed, due to its completion type: defect 🐛 bugs or defects
Projects
None yet
Development

No branches or pull requests

5 participants