Should I disable T3 eslint rule: no-floating-promises? Issues with React....

The typical model for fetching data, or doing anything asynchronous inside useEffect, does always triggers this rule,
Promises must be awaited, end with a call to .catch, end with a call to .then with a rejection handler or be explicitly marked as ignored with the `void` operator.eslint@typescript-eslint/no-floating-promises
Promises must be awaited, end with a call to .catch, end with a call to .then with a rejection handler or be explicitly marked as ignored with the `void` operator.eslint@typescript-eslint/no-floating-promises
Here's my code (with the rule disabled for the line):
import { type NextPage } from "next";
import Head from "next/head";
import Link from "next/link";
import { createBrowserSupabaseClient } from "@supabase/auth-helpers-nextjs";
import { useRouter } from "next/router";
import { useEffect } from "react";

const Home: NextPage = () => {
const supabase = createBrowserSupabaseClient();
const router = useRouter();

useEffect(() => {
const routeToLogin = async () => {
await router.replace("/login");
};

supabase.auth.onAuthStateChange((event) => {
if (event === "SIGNED_OUT") {
// eslint-disable-next-line @typescript-eslint/no-floating-promises
routeToLogin();
}
});
}, [supabase.auth, router]);

return (
<>
<Head>
<title>Metal General</title>
<meta name="description" content="Metal General" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
<Link href="/login">
<button className="text-white">Login</button>
</Link>
</main>
</>
);
};

export default Home;
import { type NextPage } from "next";
import Head from "next/head";
import Link from "next/link";
import { createBrowserSupabaseClient } from "@supabase/auth-helpers-nextjs";
import { useRouter } from "next/router";
import { useEffect } from "react";

const Home: NextPage = () => {
const supabase = createBrowserSupabaseClient();
const router = useRouter();

useEffect(() => {
const routeToLogin = async () => {
await router.replace("/login");
};

supabase.auth.onAuthStateChange((event) => {
if (event === "SIGNED_OUT") {
// eslint-disable-next-line @typescript-eslint/no-floating-promises
routeToLogin();
}
});
}, [supabase.auth, router]);

return (
<>
<Head>
<title>Metal General</title>
<meta name="description" content="Metal General" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
<Link href="/login">
<button className="text-white">Login</button>
</Link>
</main>
</>
);
};

export default Home;
Inside the useEffect, I need to route users to /login, this is an asynchronous function. The only way to bypass the error I've found is to disable to rule.
5 Replies
DYELbrah
DYELbrahOP2y ago
Not that supabase.auth.onAuthStateChange does not accept promises as the callback
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
DYELbrah
DYELbrahOP2y ago
I noticed I could bypass it by adding .then().catch() to it (and handling errors or whatever inside). I think that's a good way to bypass it
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Diogo
Diogo2y ago
the same things happens to me when using "signIn" from nextauth;
Want results from more Discord servers?
Add your server