reactjstypescriptredux-form

Typescript Error: TS2604 - How to fix?


I am trying to use a library called redux-form in a Typescript based project. When I take their "simple form" example code and implement it I get an error:

error TS2604: JSX element type 'SimpleForm' does not have any construct or call signatures.

What am I doing wrong? I have the definition file for this lib installed so either I have coded it incorrectly or the definition file is incorrect.

In my form component (stripped the code way down to make it as lean as I can):

import * as React from 'react';
import {reduxForm} from 'redux-form';
export const fields = ['firstName'];

class SimpleForm extends React.Component<any, any> {

  static propTypes = {
    fields: React.PropTypes.object.isRequired,
  };

  render() {
    const {
      fields: {firstName}
      } = this.props;
    return (<form>
        <div>
          <label>First Name</label>
          <div>
            <input type="text" placeholder="First Name" {...firstName}/>
          </div>
        </div>

        <div>
          <button>
            Submit
          </button>
        </div>
      </form>
    );
  }
}

export default reduxForm({
  form: 'simple',
  fields
})(SimpleForm);

and I consume it here (which results in the above error):

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as SimpleForm from '../components/GuestForm';

export default class Main extends React.Component<any, any> {
     render() {
        return (
        <div className='mainApp'>
            <SimpleForm />
        </div>
        );
    }
}

Solution

  • I think your problem is in how you import default exported class:

    export default reduxForm(...
    

    If you have it declared as above then you should import it like this:

    import SimpleForm from '../components/GuestForm'
    

    Otherwise you can remove 'default' and import it like this:

    import {SimpleForm} from '../components/GuestForm' 
    

    Hope this helps.