I get an error in a downloaded project using typescript, mui and formik-CodePudding

I downloaded a project from this site: https://codesandbox.io/s/gn692 I was getting some errors, that I didn't know how to resolve, so I downloaded this to see how its done. It runs on codesandbox with no problems. I installed it in Idea and it also gave me the same errors.

In the file TextField.tsx:

import React from 'react'
import { FieldProps, getIn } from 'formik'
import { TextFieldProps, TextField } from '@mui/material'

/**
 * Material TextField Component with Formik Support including Errors.
 * Intended to be specified via the `component` prop in a Formik <Field> or <FastField> component.
 * Material-UI specific props are passed through.
 */
export const FormTextField: React.FC<FieldProps & TextFieldProps> = props => {
  const isTouched = getIn(props.form.touched, props.field.name)
  const errorMessage = getIn(props.form.errors, props.field.name)

  const { error, helperText, field, form, ...rest } = props

  return (
    <TextField
      variant="outlined"
      error={error ?? Boolean(isTouched && errorMessage)}
      helperText={helperText ?? ((isTouched && errorMessage) ? errorMessage : undefined)}
      {...rest}
      {...field}
    />
  )
}

I gives error in these lines : {...rest} {...field}

Error1: Type ...Pick<(FieldProps<any, any> & StandardTextFieldProps & {children?: ReactNode}) | (FieldProps<any, any> & FilledTextFieldProps & {children?: ReactNode}) | (FieldProps<any, any> & OutlinedTextFieldProps & {children?: ReactNode}), "meta" | "onBlur" | "onChange" | "onFocus" | "variant" | "InputProps" | "inputProps" | "autoComplete" | "autoFocus" | "children" | "color" | ...> is not assignable to type React.ReactNode

Error2: Type ...FieldInputProps is not assignable to type React.ReactNode

I have no idea where to look for the error. Please help me.

CodePudding user response：

Your code is not the same as the linked sandbox. Specifically, you have changed the dependencies. The sandbox uses the old @material-ui:

import { TextFieldProps, TextField } from '@material-ui/core'

but you are using the new @mui:

import { TextFieldProps, TextField } from '@mui/material'

The new API is not backwards compatible. The errors are telling you that the contents of rest and field, respectively, are not assignable to the props of TextField, which is true of the new TextField but not apparently of the old.

Here's the post about Material-UI transitioning to MUI.

If it's acceptable to you to use the old Material-UI, you can fix the problem by just using the deps exactly as in package.json from the sandbox. However, you should be careful that there aren't any security issues in those older packages that have since been patched. You can use npm audit/yarn audit to check and fix such issues.

If you want to use the new MUI API, you'll need to do some research on how to use it together with Formik. While it appears the Formik docs are out of date, here's an example I found using the new API that may be helpful. You might want to file a bug with the Formik people to update their docs as well. Here's the relevant repository.