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

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

Open
lucasgarfield opened this issue Jan 9, 2023 · 2 comments

Comments

@lucasgarfield
Copy link
Contributor

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: facebook/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.

@rvsia
Copy link
Contributor

rvsia commented Jan 10, 2023

Hello, thank you for reporting it.

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

@Fewwy
Copy link

Fewwy commented Feb 8, 2023

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

croissanne added a commit to croissanne/image-builder-frontend that referenced this issue May 23, 2023
Also filters warnings due to
data-driven-forms/react-forms#1352 from the
test logs.
croissanne added a commit to croissanne/image-builder-frontend that referenced this issue May 23, 2023
Also filters warnings due to
data-driven-forms/react-forms#1352 from the
test logs.
croissanne added a commit to croissanne/image-builder-frontend that referenced this issue May 23, 2023
Also filters warnings due to
data-driven-forms/react-forms#1352 from the
test logs.
croissanne added a commit to croissanne/image-builder-frontend that referenced this issue May 24, 2023
Also filters warnings due to
data-driven-forms/react-forms#1352 from the
test logs.
croissanne added a commit to croissanne/image-builder-frontend that referenced this issue May 24, 2023
Also filters warnings due to
data-driven-forms/react-forms#1352 from the
test logs.
regexowl pushed a commit to osbuild/image-builder-frontend that referenced this issue May 30, 2023
ryelo pushed a commit to RedHatInsights/image-builder-frontend-build that referenced this issue May 30, 2023
Also filters warnings due to
data-driven-forms/react-forms#1352 from the
test logs.
ryelo pushed a commit to RedHatInsights/image-builder-frontend-build that referenced this issue May 30, 2023
Also filters warnings due to
data-driven-forms/react-forms#1352 from the
test logs.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants