I get this error when using react.js yup: TypeError: field.resolve is not a function

Question

I use Yup validation for form. I have dynamic object value from API. So i tried the following yup schematic. But this error is returning:

image for error

Can anyone help if you know the solution?

My code is :

const ActivitySchema = yup.object().shape({
    Activity: yup.lazy((value) => {
        if (value) {
            const ValidationObject = {
                ActivityName: yup.string().required(''),
                Answers: yup.lazy((val) => {
                    if (val) {
                        const ValidObject = {
                            LanguageName: yup.string().required(''),
                            Answer: yup.string().required('').max(maxChar, ''),
                        }

                        const NewEnt = Object.keys(val)?.reduce((acc, key) => ({
                            ...acc,
                            [key]: yup.object().shape(ValidObject)
                        }))

                        return yup.object().shape(NewEnt)
                    }
                    return yup.mixed('').notRequired('')
                })
            }

            const NewEntries = Object.keys(value)?.reduce((acc, key) => ({
                ...acc,
                [key]: yup.object().shape(ValidationObject)
            }))
            return yup.object().shape(NewEntries)
        }
        return yup.mixed('').notRequired('')
    }),
    ActivityFiles: yup.array().min(1, ''),
})

const Activities= {
    "Activity": {
      "042ab05d-eff7-420d-84bd-be7535da0f7e": {
        "ActivityName": "ActivityName",
        "Answers": {
          "en": {
            "LanguageName": "English",
            "Answer": ""
          },
          "fr": {
            "LanguageName": "French",
            "Answer": ""
          }
        }
      },
      "29102f46-f2b3-4050-87a4-92eaf31ddadb": {
        "ActivityName": "ActivityName...",
        "Answers": {
          "en": {
            "LanguageName": "English",
            "Answer": ""
          },
          "fr": {
            "LanguageName": "French",
            "Answer": ""
          }
        }
      },
    "ActivityFiles": null
  }

ActivitySchema.isValid(Activities).then((valid) => {
    if (valid) { 
      console.log("validation ok.")
    } else {
      console.log("validation is not ok.")
    }
})

I searched but all I could find this solution. : .required (don't use), .required() (use like this)

But already i commit this way.

Answer 1

I solved this problem.

const ActivitySchema = yup.object().shape({
    Activity: yup.lazy((value) => {
        if (value) {
            const ValidationObject = {
                ActivityName: yup.string().required(''),
                Answers: yup.lazy((val) => {
                    if (val) {
                        const ValidObject = {
                            LanguageName: yup.string().required(''),
                            Answer: yup.string().required('').max(maxChar, ''),
                        }

                        const NewEnt = Object.entries(val)?.reduce((acc, [key, value]) => ({
                            ...acc,
                            [key]: yup.object().shape(ValidObject)
                        }), {})

                        return yup.object().shape(NewEnt)
                    }
                    return yup.mixed('').notRequired('')
                })
            }

            const NewEntries = Object.entries(value)?.reduce((acc, [key, value]) => ({
                ...acc,
                [key]: yup.object().shape(ValidationObject)
            }), {})

            return yup.object().shape(NewEntries)
        }
        return yup.mixed('').notRequired('')
    }
    ),
    ActivityFiles: yup.array().min(1, ''),
})