将 material-ui v3 升级到 v4 导致 redux 表单字段组件错误“无效的道具组件”

Question

After upgrading from material-ui v3 to v4 I get the following error for all my <Field> components containing the prop component .

Error:

Warning: Failed prop type: Invalid prop component supplied to Field .

The Field component comes from import { Field } from 'redux-form';

The component looks like this:

        <Field
            id="some-id"
            name="some-name"
            component={renderSelectField}
        />

The code compiles and runs fine.

the renderSelectField component:

 <TextField
            select
            id={label}
            label={label}
            type={label}
            value={value}
            SelectProps={{
                MenuProps: {
                    PaperProps: {
                        style: {
                            maxHeight: 500,
                            paddingLeft: 12,
                            paddingRight: 12,
                        },
                    },
                },
            }}
            onChange={onChange}
        >

Answer 1

Update the following React dependencies (react redux v7, redux form v8):

"react-redux": "^7.2.1",
"redux-form": "^8.3.6",

Explanation:

After material-ui upgrade you most probably will see the forwardRef error in the console. React.forwardRef is used in the new version of MUI and react hooks.

Previously react, redux versions only allowed specific data types to be assigned to the component prop, however the new versions allow many more.