Promise-returning function provided to attribute where a void return was expected.

[Adnan0061]

I am having a typescript-eslint error

checked this one which is also recommended on react-hook-form website, following the same.

We are using
next:12.1.0
react-hook-form:7.24.0

how can I solve it?
Thanks

[Moshyfawn]

Try typing your submit handler this way instead:

import type { SubmitHandler } from "react-hook-form"

const onSubmit: SubmitHandler<FormValues> = (data) => {}

[Adnan0061]

yes, checked that also and that's why I mentioned it react query doc.
this also doesn't work,

[ItaloCovas]

You a God, thx hahaha <3

[gaurangrshah]

Has anyone solved this? I'm running into the same issue. Is this a typescript version issue?

"react-hook-form": "^7.36.1",
"typescript": "4.7.4"

[Adnan0061]

this is a tsconfig issue. You can share your ts config, I can probably help you with that.

[rtman]

@Adnan0061 if you have fixed this please post your fix.

[Adnan0061]

@gaurangrshah @rtman actually this is a showing from eslint configuration. In .eslintrc.json file you might find the following option this is the issue unless "react-hook-form: doesn't change their structure.

"@typescript-eslint/no-misused-promises": "error",

[rtman]

yup you will see this if that rule is in use, doesn't mean it's wrong though.

[gaurangrshah]

@Adnan0061 @rtman
I found a work around, well actually two, since hook-form is not the only place I am seeing the error.

The first is to wrap the handleSubmit caller in an onPromise handler:

The next is to use the void syntax:

[gaurangrshah]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void

[Adnan0061]

my bad, I didn't aware of that. Great!!!

[gaurangrshah]

no worries, i wasn't either, but now it's in my arsenal, and I have a better understanding of it. so it's a win / win.

[peter-novak-m]

I wasn't aware of this either! Thanks a lot!

[mkandan]

Same, thank you

[Moshyfawn]

#9325 (comment)

Alright, I've done a little bit more research.

Check out this typescript-eslint/typescript-eslint#4623 PR that adds granular options within checksVoidReturns for the no-misused-promises TS ESLint rule; the attributes options was added specifically for use-cases like the one you're experiencing. This is the official TS ESLint solution and we recommend you update your .eslintrc config file with it:

"rules": {
  "@typescript-eslint/no-misused-promises": [2, {
    "checksVoidReturn": {
      "attributes": false
    }
  }]
},

[CesarQD98]

Interesting info! Just a quick question, what does the 2 stand for?

[stephenvector]

@CesarQD98 2 is the same as "error". It threw me off too, until I found this doc.

[RubenSmn]

For those who do not want to disable the eslint rules. I solved it by passing a anonymous function with the event which you can then use to call on handleSubmit.

<form
  onSubmit={(event) =>
    void handleSubmit(onSubmit)(event)
  }
>

[suchcodemuchwow]

This one gives:

Expected 'undefined' and instead saw 'void'.eslint[no-void](https://eslint.org/docs/rules/no-void)

So you basically need to disable no-void then 😅

[dBianchii]

What are you even doing here? Calling the promise using the event as a parameter?
Can someone explain?
I did this in my code and it is working without changing my eslint rules

[RubenSmn]

@dBianchii the handleSubmit method, we get from the useForm hook, returns a function that can be called to handle the submit event from the form. We can invoke this function by calling it with the event as a argument.

Maybe this way of writing it is more clear:

onSubmit={(event) => {
  const theReturnedFunction = handleSubmit(onSubmit);
  void theReturnedFunction(event);
}}

[anricoj1]

I still think this goes beyond "it's just eslint" or "tsconfig rule". Different ways of writing this causes different outcomes.

I started with this

<form onSubmit={form.handleSubmit(onSubmit)}>

Which yields this error: "Promise-returning function provided to attribute where a void return was expected". Which makes sense because you're trying to assign a Promise returning function to onSubmit which expects void.

You can do this but this seems to skip any validators you have like a zod schema. It also submits your form as query params.

<form onSubmit={(event) => void form.handleSubmit(onSubmit)}>

Passing the event to the previous example seems to work as expected which I got from @RubenSmn 's answer.

<form onSubmit={(event) => void form.handleSubmit(onSubmit)(event)}>

But If you want to go for extra measures you could do it like this as well,

 <form onSubmit={(event) => {
      event.preventDefault();
      void form.handleSubmit(onSubmit)(event);
  }}>

[kieracarman]

It looks like this could be also be written more elegantly like:

<form onSubmit={void handleSubmit(onSubmit)} />

Unless I'm missing something?

[ralph-p]

This works but it does not over ride the default form behavior with event.preventDefault();
This solution seems to be working but I wonder if there is a better way.

  const onSubmit = (data: FormData) => {
    ...do something with data...
    reset()
  };

 ...

  <form onSubmit={(event) => {
      event.preventDefault();
      void handleSubmit(onSubmit)(event);
  }}>

[Ali7040]

I am facing the same Promise-returning function provided to attribute where a void return was expected.

onSelect={async (props) => {
const linkedEntityId = props.type === EntityType.climb
? (props as TypesenseDocumentType).climbUUID
: (props as TypesenseAreaType).id
void onAdd({
mediaId: mediaWithTags.id,
entityId: linkedEntityId,
entityType: props.type === EntityType.climb ? TagTargetType.climb : TagTargetType.area
})
} how can I solve

[tparvi]

We have solved this with a helper function

function asyncHelper(func: Promise<void>) {
  return () => {
    func.catch((error) => {
      console.error(error);
    });
  };
}

Usage

async function onCLick(): Promise<void> {
  // your async code
}

<Button onClick={() => asynHelper(onClick())}.../>

In our case the actual onClick handler either just calls something like trigger() / react query's invalidateQueries so there isn't really anything we can do if those fail. In some cases we might have own try/catch inside the onClick handler.

[buraczyn]

The problem here is when you want to try/catch the function that returns the promise. This limits that ability to handle it in different ways