Type 'FunctionComponent<WrappedFieldProps & IProps>' is not assignable to type '("input" & FunctionComponent

Question

Could you help me please understand and fix error

I use typescript, webpack, redux-form. When I run webpack-dev-server --mode development I have compilation error.

It was compiled, but I deleted node_modules folder and yarn install it. yarn.lock was not deleted.

InputField.ts

import React from 'react';
import {WrappedFieldProps} from 'redux-form';

interface IProps {
    label: string,
}

const InputField: React.FC<WrappedFieldProps & IProps> = ({
    label,
}) => {

    return (
        <div className="form-control">
            <label>
                {label}:
            </label>
        </div>
    );
};

export default InputField;

in form component

import InputField from 'Field/InputField';

render() {
        return (
                <form onSubmit={handleSubmit}>
                    <Field
                        component={InputField}
                        name="email"
                        label="E-mail"
                    />

error

 TS2322: Type 'FunctionComponent<WrappedFieldProps & IProps>' is not assignable to type '("input" & FunctionComponent<WrappedFiel

dProps & IProps>) | ("select" & FunctionComponent<WrappedFieldProps & IProps>) | ("textarea" & FunctionComponent<WrappedFieldProps & I

Props>) | (ComponentClass<...> & FunctionComponent<...>) | (FunctionComponent<...> & FunctionComponent<...>)'.
  Type 'FunctionComponent<WrappedFieldProps & IProps>' is not assignable to type '"input" & FunctionComponent<WrappedFieldProps & IPro

ps>'.
    Type 'FunctionComponent<WrappedFieldProps & IProps>' is not assignable to type '"input"'.

Answer 1

Define component like

const InputField = (props: WrappedFieldProps & IProps) => {

IMHO it seems like there is some issue with @typings/redux-form

Answer 2

Try it npm uninstall redux-form npm install redux-form