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•17mo ago

Not that supabase.auth.onAuthStateChange does not accept promises as the callback

Unknown User•17mo ago

Message Not Public

DYELbrah•17mo 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•17mo ago

Message Not Public

Diogo•16mo ago

the same things happens to me when using "signIn" from nextauth;

Gaming

Programming

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