Form with constraints components dont work with react 18

[enqbator]

When building with webpack / typescript / @babel/react react-form-with-constrains components prevent my project from building after updating to react 18.

Build functions again after downgrading back to react 17.

"FieldFeedbacks cannot be used as a jsx component"

"Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Pick<Readonly, never> & Partial<...>'."

[enqbator]

To clarify, it looks to be caused breaking changes in the react typescript bindings.

DefinitelyTyped/DefinitelyTyped#56210

[andrec93p]

After struggling with a project just upgraded to React 18, I actually found a workaround. As far as I'm aware, the issue is just related to the typing, so it can be patched with some TypeScript, but it doesn't look pretty. You can do it like this.

1. Create inside your src folder the file react-form-with-constraints-bootstrap.d.ts (if you're using Bootstrap of course). This will override the type definition for the module.
2. Use this as the content.

import {ReactNode} from "react";
import {
  FieldFeedbacksProps as FieldFeedbacksPropsBase,
} from "react-form-with-constraints";
import {FieldFeedbacksContext} from "react-form-with-constraints/lib/FieldFeedbacks";

// Use the path here, NOT the just the name.
import {
  FieldFeedbacks as FieldFeedbacksBase,
} from "../node_modules/react-form-with-constraints-bootstrap";

export interface FieldFeedbacksProps extends FieldFeedbacksPropsBase {
  children?: ReactNode; // <- This adds the capability to use children...
}

export declare class FieldFeedbacks extends FieldFeedbacksBase {
  static defaultProps: FieldFeedbacksProps;
  constructor(props: FieldFeedbacksProps, context: FieldFeedbacksContext);
  render(): null; // <- ...and this prevents the "Cannot be used as a JSX component" error.
}

export {
  FieldFeedback,
  FieldFeedbackTooltip,
  Input,
  Async,
  FormWithConstraints,
} from "../node_modules/react-form-with-constraints-bootstrap";

Basically this overrides the type declarations for the module making them compatible with React 18. The ugly part is that in order to make the render method work you have to redefine it as a method returning just NULL, or the declaration won't be compatible with the base class one.

The actual fix should be quite trivial though, I'll try opening a PR if I have a moment.

[enqbator]

@andrec93p Thank you for that. I was looking at having to use something else for validation, which is a shame. Every other validation package seems to be way more complicated than they need to be and just plain invasive in the way they affect how you have to make the form/access the values.

It would have meant reworking all the markup and even loading / saving logic in all of my apps forms.

Thanks again.

[tkrotoff]

Big PR that fixes this (among other things): #59

[tkrotoff]

Fix published in v0.19.0