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

beginning with --keepAliveTimeout the following

I encountered an issue while attempting to retrieve data using route parameters. It seems that I am unable to access the 'imagepath' property as it is undefined

An object resulting from the combination of two separate objects

Transforming TypeScript snapshot data in Firebase Cloud Functions into a string format for notification purposes

Unable to execute an Angular 2 application within Visual Studio 2015

What is the best way to integrate ContextualMenu with Persona in Office Fabric UI React?

Create an array that can contain a mix of nested arrays and objects

The issue of saving Rails input from an Angular2 front end has been causing some trouble

Exploring the differences between req.params and req.query when working with Next.js dynamic API routes

Having trouble getting the tailwindcss Google font link tag to apply properly

One method of extracting an object from an array using a parameter function is by utilizing the following approach

Issue with Next.js: Callback function not being executed upon form submission

Nonconforming Typescript argument specification

Error encountered in Node.js OpenAI wrapper: BadRequestError (400) - The uploaded image must be in PNG format and cannot exceed 4 MB

What is the best way to combine the attributes of multiple objects within a union type?

Developing step code for CucumberJS Scenario Outlines

The sequence of styles injection in JSS and Material-UI varies from development to production environments

Following mouse element delay issue in the latest directory of a Next.js 13 application

Next-generation Keystone mutation customization

Is it possible to utilize getInitialProps in both _app.js and in individual pages within the application?