Skip to content

Upgrading @patternfly/react-core causes propTypes error in Pf4FormTemplate #1352

Description

@lucasgarfield

Scope::
Pf4FormTemplate

Description:
After upgrading @patternfly/react-core to the latest version, the following console error appears when running our app in development mode: Warning: Failed prop type: Invalid prop FormWrappersupplied toFormTemplate, expected one of type [function].

The error originates from the PF4FormTemplate component which imports Form from @patternfly/react-core:
https://github.com/data-driven-forms/react-forms/blob/master/packages/pf4-component-mapper/src/form-template/form-template.js#L6

Form is then supplied as the FormWrapper prop to FormTemplate:
https://github.com/data-driven-forms/react-forms/blob/master/packages/pf4-component-mapper/src/form-template/form-template.js#L79

FormTemplate in term expects FormWrapper to be a func propType:
https://github.com/data-driven-forms/react-forms/blob/master/packages/common/src/form-template/form-template.js#L174

I have discovered the cause of the problem. patternfly/patternfly-react@be2c23f refactored the Form component to support ref forwarding. Previously the typeof of Form was a function, however typeof of forwardRef is apparently actually object. This results in incorrect propTypes and a console error. This exact issue is discussed at length here: react/react#12453.

We are tracking the issue as it relates to our app here: osbuild/image-builder-frontend#907

I am not sure what a good solution looks like. Per the React docs, introducing forwardRef should be considered a breaking change. Unfortunately, that was not done. https://reactjs.org/docs/forwarding-refs.html#note-for-component-library-maintainers

Updating the propType would solve the problem in our app, but would be a breaking change (which is arguable, I suppose, given it is just a type warning) for anyone using a version of @patternfly/react-core released prior to the introduction of forwardRef in the Form component.

Activity

  1. rvsia commented on Jan 10, 2023

    @rvsia
    Contributor

    Hello, thank you for reporting it.

    What about to use PropTypes.elementType, does it contain support for the forwardRef?

  2. Fewwy commented on Feb 8, 2023

    @Fewwy

    Encountered the same issue while I am preparing a PR for the insights inventory with new modals.
    RedHatInsights/insights-inventory-frontend#1755

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions