<button onClick={() => signIn()}>Login</button> is giving the following @typescript-eslint/no-misused-promises error in VS Code: Promise-returning function provided to attribute where a void return was expected.
I am following this tutorial: https://youtu.be/nzJsYJPCc80?t=642 (which doesn't seem to be getting the error)
I created this project with npm create t3-app@latest <project-name> and added all: trpc, tailwind, next-auth, & prisma (ie everything that create-t3-app provides).
Should I just disable this eslint error with /* eslint-disable @typescript-eslint/no-misused-promises */ as suggested in the "Quick Fix"? Or update the default .eslintrc.json provided by create-t3-app?
Any direction would be greatly appreciated
// src/pages/index.tsx
import { type NextPage } from "next";
import Head from "next/head";
import Link from "next/link";
import { signIn, signOut, useSession } from "next-auth/react";
import { api } from "../utils/api";
const Home: NextPage = () => {
return (
<>
<Head>
<title>Create T3 App</title>
<meta name="description" content="Generated by create-t3-app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<div>
<button onClick={() => signIn()}>Login</button>
</div>
</>
);
};
export default Home;
You can add void as the return type of the function, like so: