Encountering an error of type 'RequiredStringSchema<string | undefined, AnyObject>' during validation with yup

I'm facing an issue with the yup validation library in my Next TS project. The error revolves around the type property under the PostWithSig object in my validation schema. I'm unsure of the root cause, but one possibility could be the name type itself.

The error message I'm seeing is:

(property) BaseSchema<any, any, any>.type: string Type 'RequiredStringSchema<string | undefined, AnyObject>' is not assignable to type 'string'.ts(2322) schema.d.ts(53, 14): The expected type comes from property 'type' declared here on type 'AnySchema<any, any, any>'

Here is my validation schema:

data: object().shape({
    createPostTypedData: object().shape({
      id: string().required(),
      expiresAt: date().required(),
      typedData: object().shape({
        types: object().shape({
          PostWithSig: array().of({
            name: string().required(),
            type: string().required(),
          }),
        }),
        domain: object().shape({
          name: string().required(),
          chainId: number().required(),
          version: string().required(),
          verifyingContract: string().required(),
        }),
        value: object().shape({
          nonce: number().required(),
          deadline: number().required(),
          profileId: string().required(),
          contentURI: string().required(),
          collectModule: string().required(),
          collectModuleInitData: string().required(),
          referenceModule: string().required(),
          referenceModuleInitData: string().required(),
        }),
      }),
    }),
  }),

If anyone can shed light on why this error is occurring and suggest a solution, it would be greatly appreciated.

Answer №1

It dawned on me after some time that you had omitted utilizing an object schema:

array().of(object().shape({
    title: string().required(),
    category: string().required(),
})),

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dynamically update multilayer markers on X-map using angular-maps

Utilizing Bing Maps (x-map) for displaying data in multiple layers on the map. The markers' data will be updated through a REST API call to the backend. I am facing an issue where the markers do not update on the map despite changing the data source. ...

How can the button press, release, drag, and drop events be implemented in Ionic?

I have been working on adding a recording feature that allows for recording when a button is pressed and stops when it is released. I decided to use the ionic-long-press plugin for this functionality. However, I have noticed that it does not support drag ...

Do these two syntaxes for fat arrow functions differ in any way, or are they essentially the same in function?

I've noticed in Angular 6 / Typescript code examples that fat arrow functions are used with two different syntaxes. Is there any distinction between them, or do they perform the same functionally? blah.then(param => { // perform some action wi ...

Error Message: Module not found while using Node Express with TypeScriptIssue: A

I have set up a straightforward node express app using TypeScript. My goal is to implement an errorMiddleware in the index.ts file. As I try to start the server, I encounter the following error: at Module.require (node:internal/modules/cjs/loader:100 ...

Guide on creating a Typescript function that exchanges the values of two properties in an object using their names, while ensuring type compatibility

I am attempting to create a function that can switch the values of two properties on an object based on their names. I want the compiler to enforce type compatibility, ensuring that both properties have the same data type: function swap<T, TKey1 ex ...

An error arises in Typescript when the reducer state does not update upon clicking. The error message indicates that the properties 'state' and 'dispatch' are not recognized on the type 'UserContextType | null'

Having recently delved into typescript with react, I've encountered some issues. Despite trying various solutions, the state doesn't seem to work properly and I keep getting a typescript error stating: Property 'state and dispatch' does ...

Determine whether there is greater available space above or below a specific element within the DOM

I'm looking to create a dynamic layout where an input field is accompanied by a list in a div, positioned either above or below depending on available space. This setup needs to account for the fact that the input field could be located anywhere on th ...

Unlocking the secrets of Nested JSON data in ngContainer

I am having trouble retrieving certain fields from a JSON Object in order to populate an expandable table using Angular Material. When I attempt to access these fields using the '.' or '[]' notation, the value returned is 'undefine ...

Resolve cyclic dependency caused by utilizing the useFactory parameter

I am working with an injectable service that utilizes the useFactory attribute to determine whether it should be injected or if an implemented type should be used instead. import { Injectable } from '@angular/core'; import { Router } from ' ...

Vue: rendering props cannot be utilized with TSX

After switching my setup from JSX in a Vue component to TS with vue-class-component, I found that only the code snippet below works for me (as shown in the example on repo): import Vue from 'vue' import { Component } from 'vue-property-dec ...

Optimal method for translating date string data from JSON to the user interface

Let's take a look at this JSON response: { data: { nestedData: { someMoreNestedData: { someArray: [ { someWhereThereIsADate: '2018-10-26' } ] }, w ...

Utilizing Angular 4's piping feature to manipulate data sourced from an API observable within

I am currently working on setting up a filter for my stories. After subscribing to the API call, I receive the data in the form of an array of objects. However, I am encountering an error while trying to apply filters. Here is a snippet of relevant inform ...

What is the method to invoke a function within another function in Angular 9?

Illustration ` function1(){ ------- main function execution function2(){ ------child function execution } } ` I must invoke function2 in TypeScript ...

Automating the process of rewirting git commit messages on a branch using Git

Is there a way to automate the rewriting of commit messages containing a specific substring on a particular branch? For example, in a repository like this: https://i.sstatic.net/3e4bW.png I want to modify all commit messages on the mybranch branch (not o ...

Using React.useContext in a Class Component with Typescript: Issue resolving the signature of the class decorator

Struggling to implement a store using React.createContext within my class components. The setup of my App is as follows: const someStore = new SomeStore(); export const StoreContext = React.createContext(someStore); export interface IProps { store ...

Tips for incorporating the closeAutocomplete function into ng4-geoautocomplete

Hey there! I've incorporated the ng4-autocomplete component into my custom component and now I'm trying to figure out how to detect when the autocomplete dropdown closes. Can you help me out with implementing the "closeAutocomplete" method? Let& ...

To ensure the specificity selector for material UI in React, it is essential to include an empty CSS definition

The styling for the unselected toggle button is working smoothly. However, when you don't define an empty class selector, the style of the selected toggle button does not show: ./App.js import * as React from "react"; { render ...

There are no properties associated with this particular data type

As someone who is new to TypeScript, I am encountering two issues with data types. This snippet shows my code: const say: object = { name: "say", aliases: [""], description: "", usage: "", run: (client: ob ...

Perform an action after the Ngx Bootstrap modal has been hidden

My modal features a login button: <button type="button" (click)="save()" class="btn btn-primary"> login </button> Upon clicking the button, my desired outcome is to: first hide the modal, and second navigate to another route. However, ...

Is it impossible to use type as a generic in TypeScript?

Struggling with TypeScript in React and encountered an issue. I decided to use a generic to build an abstracted class related to Axios. However, I ran into an ESLint error when using any as the type parameter for my generic. ESLint: Unexpected any. Specif ...