Promise returned where a void return was expected

Question

Typescript is giving me the following error const handleSignIn: (e: React.SyntheticEvent) => Promise<void> Promise-returning function provided to attribute where a void return was expected. for the following code <form onSubmit={handleSignIn}>. It does the work and sends the registration email but I am still getting the error from the typescript. I tried to solve the issue with this and it does help with TS error but the code will not work.

import React, { useState } from "react";
import { signIn } from "next-auth/react";

function RegisterPage() {
  const [email, setEmail] = useState("");

  const handleSignIn = async (e: React.SyntheticEvent): Promise<void> => {
    e.preventDefault();
    try {
      await signIn("email", {
        email,
        redirect: false,
        callbackUrl: "/",
      });
    } catch (error) {
      console.log(error);
    }
  };

  const registerForm = () => (
    <form onSubmit={handleSignIn}>
      <input
        type="email"
        className="form-control"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Your email"
        autoFocus
      />
      <br />
      <button type="submit" className="btn btn-raised">
        Sign In
      </button>
    </form>
  );
  return (
    <div className="container p-5">
      <div className="row">
        <div className="col-md-6 offset-md-3">
          <h4>Register</h4>
          {registerForm()}
        </div>
      </div>
    </div>
  );
}

export default RegisterPage;

have you tried replacing
with
handleSignIn()}> Sounds like it thinks form can't accept async functions but only normal ones? — Vuk, Mar 08 '23 at 00:48
@Vuk yeap I tried it and it helps with the error but the code will not work — John John, Mar 08 '23 at 00:54
You need to update what I sent to actually include the event
handleSignIn(e)}>, Sorry I just quickly typed the comment out — Vuk, Mar 08 '23 at 02:10

score 2 · Answer 1 · answered Mar 08 '23 at 01:48

2

This is a report about a misused promise. According to TS ESLint update your .eslintrc config by adding

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

answered Mar 08 '23 at 01:48

monim

3,641
2
10
25

Promise returned where a void return was expected

1 Answers1