How can I use one NextJS util function to get cookies in either a RSC or a client component?

Question

I have a middleware file that makes a GQL request in it (using the library graphql-request) - which I then use to set the default value of a cookie (standard process).

However, I am encountering this issue:

And then when I fix it with the proposed fix here (https://github.com/jasonkuhrt/graphql-request/issues/399#issuecomment-1278272186) - I then get this error:

So, the middleware now fetches data completely fine - however I can't use that util function I wrote for both server components and client components - which looks like this:

import { decodeJwt } from "jose";
import { cookies } from "next/headers";
import Cookies from "js-cookie";
import { env } from "@/env.mjs";

export function getAuthToken(): string | undefined {
  const isServer = typeof window === "undefined";
  if (process.env.NODE_ENV === "development") return env.NEXT_PUBLIC_DEV_TOKEN;
  if (!isServer) return Cookies.get("monosuite_token");

  return cookies().get("monosuite_token")?.value;
}

export function getAuthHeader(): { Authorization: string } | undefined {
  const token = getAuthToken();
  if (!token) return undefined;
  return {
    Authorization: token,
  };
}

Is there a nice fix for this?