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

[Lizeth_Rodriguez_Cab (Lizeth Rodriguez Cabrales)]

In the new update of SonarQube that includes the TypeScript rule S6544, the following error has emerged in my code: “Promise-returning function provided to attribute where a void return was expected”. I have already verified that the function is not a promise, but the error persists. Has anyone experienced the same or a similar error? I am using the React Hook Form library for form handling.

import React from "react";
import { useForm, SubmitHandler } from "react-hook-form";

type FormValues = {
  firstName: string;
  lastName: string;
  email: string;
};

export default function App() {
  const { register, handleSubmit } = useForm<FormValues>();
  const onSubmit: SubmitHandler<FormValues> = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <input type="email" {...register("email")} />

      <input type="submit" />
    </form>
  );
}

[ilia]

Hi Lizeth,

Thank you for notifying us. On what line is the issue raised?

handleSubmit does in fact return a promise as you can see here.

Best,
Ilia

[Lizeth_Rodriguez_Cab (Lizeth Rodriguez Cabrales)]

Hi Ilia, in this line but I don’t have control of the function handle submit I try with example of react-hook-form documentation and sonar continue show the error

TS Support

[ilia]

Hi Lizeth,

Can you confirm that the issue is raised by the handleSubmit() function call? Could you add a screenshot of the issue raised on SonarQube?

Best,
Ilia

[guerin-jerome (Jérôme Guèrin)]

Hi Ilia, I’ve same problem :

I don’t understand why. Sonarlint in my VSCode say nothinb but sonarcloud failed. It’s possible my local sonarlint is badly setted.

But, I don’t know how to fix this.

My “handleSubmitExpenseForm” →

And “handleSubmit” provided by react-hook-form.

[Lizeth_Rodriguez_Cab (Lizeth Rodriguez Cabrales)]

Hi Jerome, finally I replace de handleSubmit of react-hook-form for my own custom submit and get the values form with getValues fn of react-hook-form:

[guerin-jerome (Jérôme Guèrin)]

Ok it’s an alternative but, we can’t use handleSubmit of react-hook-form ? It’s not very good

But thank a lot for the response and alternative solution.

[guerin-jerome (Jérôme Guèrin)]

Do you have any solution @ilia ?

[ilia]

Hi everyone,

We’re looking into the situation of flagging situations where promises are returned and void is expected in JSX attributes. We will come back to you shortly.

Best,
Ilia

[guerin-jerome (Jérôme Guèrin)]

Ok thank’s @ilia, I await your reply.

[ilia]

Hi,

We’ve opened an issue in SonarJS: Fix FP S6544 (`no-misused-promises`): Don't flag `Promise-returning function provided to attribute where a void return was expected` in JSX attributes · Issue #3938 · SonarSource/SonarJS · GitHub

Best,
Ilia