Getting TS2605 and TS2607 errors

[jmcaffee]

I'm receiving errors when trying to import and use the package's FieldFeedbacks and FieldFeedback components.

TS2605: JSX element type 'FieldFeedback' is not a constructor function for JSX elements.
     Property 'setState' is missing in type 'FieldFeedback'.

TS2607: JSX element class does not support attributes because it does not have a 'props' property.

We're currently running:

React@15.5.4
webpack 3.1.0
tsc 2.3.5

I've tried using the following versions of react-form-with-constraints with the same results (thinking it might be because of your react 16 updates in the recent versions):

0.6.3
0.6.2
0.6.1
0.6.0

I'm getting ready to try 0.5.2 before giving up and moving on but I like the simplicity of this lib and I really hope I can get it to work.

Example code:

import * as React from 'react';
// ...
import ( FieldFeedbacks, FieldFeedback } from 'react-form-with-constraints';

export interface FormDetailProps {
    selectedRecord: IRecord
    onChange: (item) => void
}

export class FormDetail extends React.Component<FormDetailProps, {}> {
    constructor(props) {
        super(props)
    }    

    render() {
        // ...
        const { onChange, selectedRecord} = this.props
        // ...

        return (
            <Form horizontal >
                <input name="ctrl1" onChange={this.props.onChange} type="text" value={selectedRecord.dummy1} />
                <FieldFeedbacks for="ctrl1" show="all">
                    <FieldFeedback when={x => !x} error>
                        Required
                    </FieldFeedback>
                </FieldFeedbacks>
            </Form>
        )
    }
}

Is the problem because I'm not running react 16? Or something else I'm missing?

Thanks for your time

[tkrotoff]

Please provide a codepen/codesandbox/jsfiddle with the error so I can see what's going on.

Your copy-pasted code seems to contain some errors:

• import ( FieldFeedbacks, FieldFeedback }: ( should be {
• <Form horizontal>: <FormWithConstraints ...> is missing
• (React.Component<FormDetailProps, {}> can be simply written React.Component<FormDetailProps> thx to recent @types/react changes)

Did you try one of the TypeScript example from https://github.com/tkrotoff/react-form-with-constraints/tree/master/examples ?

I've released 0.6.4 with some minor TypeScript adjustments due to very recent @types/react updates. These adjustments should be unrelated to your TypeScript error. With this release I've re-checked everything and all react-form-with-constraints tests and TypeScript examples are compiling fine.

[jmcaffee]

Thanks for taking the time to look at this.

Ignoring the syntax errors (due to me mistyping my example), the solution to the compile errors was to upgrade my TypeScript version to 2.4.2 and @types/react to 15.6.6

[cozmy]

This issue it's replicable on the current master

[cozmy]

After a bit of investigatio, the root cause is import React from 'react'; in your code. This, for other projects which don't set allowSyntheticDefaultImports to true, doesn't work. Maybe you can change it to import * as React from 'react'; or put this requirement of enabling allowSyntheticDefaultImports in the documentation?

[tkrotoff]

@cozmy

for other projects which don't set allowSyntheticDefaultImports to true, doesn't work

Thx for the report, I will investigate if there is a way to support allowSyntheticDefaultImports both true and false

[cozmy]

I guess the good old find-and-replace would do the trick here. Just replace import React from 'react' with import * as React from 'react'. It should not break any functionality.

[tkrotoff]

@cozmy I went back to import * as React with this commit: b18d61514a5b3d91413210d4915fabdff1e2459f Thanks