Typescript Error: TS2604 - How to fix?

Question

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>
        );
    }
}

Kries

Answer 1

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.

Clinkerbuilt

I appreciate the help but this does not fix the problem. Using the first import you suggest I get error TS1192: Module ''redux-form'' has no default export and removing default while importing my original way gives: error TS1128: Declaration or statement expected. – Kries

I am sorry - made a mistake while reading your decription. I have updated the answer - I meant importing SimpleForm not reduxForm. Sorry for that. Can you see if it will help? – Clinkerbuilt

Answer 2

I can't comment on the answer above (from Amid), because I don't have enough reputation on StackOverflow, but his answer is correct.

I had the same issue: *** (82,14): error TS2604: JSX element type 'SlideForm' does not have any constructor call signatures.***

Here is my previous code:

export default class SliderForm extends React.Component<any, any> {...};

with the previous way of importing the class :

import * from SlideForm from '../../common/SliderForm';

This leads me to the same issue as yours.

---

So I changed the way I'm doing the import to this :

import SlideForm from '../../common/SliderForm';

And it solved my issue.

Velez

Answer 3

In your case you can also do this (since it has been exported default)

import * as SlideForm from '../../common/SliderForm';

This error occurs if the component has been exported as the default and you're trying to import it with {} or as *

OR the other way around.

If the component has not been declared as default, it should be imported with braces for example -

import {component} from '../path/..'

Downandout

Answer 4

It sounds funny but last time I had this error I forgot to change the file extension from *.js to *.tsx. Always double-check it before, especially the file you want to import.

Quipu