Encountering type errors in NextJS with TypeScript

Question

Encountering type errors in NextJS with TypeScript

I am facing an issue while trying to run this function:

"use server";

export const addProduct = async (formData: FormData, imageUrl: string) => {
  const productName = formData.get("productName")?.toString();
  const description = formData.get("description")?.toString();
  const location = formData.get("location")?.toString();

  if (!productName || !description || !imageUrl || !location) {
    throw Error("Missing required fields");
  }
};

<form className="flex flex-col gap-4 text-lg" action={addProduct(imageUrl)}>

Errors:

Type '(formData: FormData, imageUrl: string) => Promise<never>' is not assignable to type 'string | ((formData: FormData) => void) | undefined'. Type '(formData: FormData, imageUrl: string) => Promise<never>' is not assignable to type '(formData: FormData) => void'. Target signature provides too few arguments. Expected 2 or more, but got 1.

No matter how many arguments I add to the addProduct function, the error persists, possibly due to incorrect types being used.

typescript next.js react-typescript typescript-types

Answer 1

Answer №1

"createItem" is a method that does not return anything, also known as void.

You're currently using action={createItem(...)}, which means you are passing the result of the "createItem" method to "action", not the actual method itself. To make it work correctly, you need to pass the method itself to the form so that the form can invoke it when needed.

If the createItem method did not require any arguments, you could simply use action={createItem}. However, since you need to provide the imageUrl, this approach won't work.

One solution is to use an inline function:

<form action={(data: FormData) => createItem(data, imageUrl)}>

Another option is to curry the createItem method:

const createItem = (imageUrl: string) => async (formData: FormData) => {
  const itemName = formData.get("itemName")?.toString();
  const description = formData.get("description")?.toString();
  const location = formData.get("location")?.toString();

  if (!itemName || !description || !imageUrl || !location) {
    throw new Error("Required fields missing");
  }
};

Then:

<form action={createItem(imageUrl)}>

In this case, calling createItem(imageUrl) will now return a function that only takes FormData as input, matching what the form tag expects.

You might want to reconsider why imageUrl is passed as an argument. Storing it in state and accessing it within the method may be more efficient than expecting it as a parameter.

Answer 2

"createItem" is a method that does not return anything, also known as void.

You're currently using action={createItem(...)}, which means you are passing the result of the "createItem" method to "action", not the actual method itself. To make it work correctly, you need to pass the method itself to the form so that the form can invoke it when needed.

If the createItem method did not require any arguments, you could simply use action={createItem}. However, since you need to provide the imageUrl, this approach won't work.

One solution is to use an inline function:

<form action={(data: FormData) => createItem(data, imageUrl)}>

Another option is to curry the createItem method:

const createItem = (imageUrl: string) => async (formData: FormData) => {
  const itemName = formData.get("itemName")?.toString();
  const description = formData.get("description")?.toString();
  const location = formData.get("location")?.toString();

  if (!itemName || !description || !imageUrl || !location) {
    throw new Error("Required fields missing");
  }
};

Then:

<form action={createItem(imageUrl)}>

In this case, calling createItem(imageUrl) will now return a function that only takes FormData as input, matching what the form tag expects.

You might want to reconsider why imageUrl is passed as an argument. Storing it in state and accessing it within the method may be more efficient than expecting it as a parameter.

Encountering type errors in NextJS with TypeScript

Answer №1

Similar questions

Updating a URL for all users using React/Next.js and Firebase: a guide to refreshing the page

Executing a function by click event using the onclick attribute from a file located in the public directory of my project (Next

Is it possible for me to use the name "Date" for my component and still be able to access the built-in "new Date()" functionality?

Manipulating Data in TypeScript: Creating a Mutated Copy of a List of Dictionaries

Is there Polyfill Compatibility for Custom Elements in Angular 9?

What is causing unexpected behavior when one service calls another service?

Performing unit testing on a Vue component that relies on external dependencies

The use of dangerouslySetInnerHTML causes the page layout to stretch, expand, or grow in size

Images appear as plain text in the preview of VUE 3 (with TypeScript)

The module 'json-stringify-safe' could not be located

I encountered an unhandled rejection error of type TypeError when trying to read properties from an undefined value, specifically when attempting to read '__emotion_real'

TS7016: No declaration file was found for the module named 'rxjs'

The options passed to createReadStream in TypeScript do not accept {start: 90, end: 99}

Enclose this within Stencil.js components

Can we limit the return type of arrow function parameters in TypeScript?

Enhancing search capabilities in Angular 8.1.2 by filtering nested objects

Steps to resolve the Angular observable error

Encountering a PropertyTypeError while attempting to process a payment via Stripe in conjunction with use-shopping-cart on Next.js

Angular: The type AbstractControl<any> cannot be assigned to type FormControl

Having trouble with typecasting in Angular 9 after receiving an HTTP response?