Codex Posts - Answer Overflow

Codex

Explore posts from servers

•Created by Codex on 8/22/2024 in #questions

React Error

'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.ts(2686)

'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.ts(2686)

I am getting this error in an extremely simple page (using pages router)

const ModifyAchievements = () => {
  return <div>Hello World!</div>;
};

export default ModifyAchievements;

const ModifyAchievements = () => {
  return <div>Hello World!</div>;
};

export default ModifyAchievements;

I have no idea why it wants me to import React when in all my other pages (probably 30+) it doesn't ask me to. I have tried restarting typescript server multiple times. Note: The page runs perfectly and does not give any console errors I have no idea why it is detecting an error.

4 replies

TTCTheo's Typesafe Cult

•Created by Codex on 8/2/2024 in #questions

Next Auth Session

I want to use useSession() I want the callback to do a check on the url it is coming from (req.headers.host is ideal); however, I cannot access this information in the callback function. A possible solution I have explored is to go to /api/auth/[...nextauth].ts and override it from there however the problem with this is that whenever I am making trpc requests I have to also manually override that one which makes me repeat unnecessary code. I was just wondering if there is a better way to go about this. The part of the code I am referring to for the callbacks is the following:

export const authOptions: NextAuthOptions = {
  callbacks: {
    session: ({ session, user }) => ({
      // Ideally make this a function that can access the request
      ...session,
      user: {
        ...session.user,
        id: user.id,
      },
    }),
  },

export const authOptions: NextAuthOptions = {
  callbacks: {
    session: ({ session, user }) => ({
      // Ideally make this a function that can access the request
      ...session,
      user: {
        ...session.user,
        id: user.id,
      },
    }),
  },

Thank you in advance.

1 replies

TTCTheo's Typesafe Cult

•Created by Codex on 4/9/2024 in #questions

trpc context not passed correctly

I will include my setup at the end. My problem is that I am using nextauth with database sessions and passing the session as context into the procedures; however, everything that I have added myself isn't being included in the context for some reason (user.id and user.role) This is my session type I declared,

declare module "next-auth" {
  interface Session extends DefaultSession {
    user: DefaultSession["user"] & {
      id: string;
      image: string;
      role: string;
    };
  }

  interface User {
    id: string;
    image: string;
    role: string;
  }
}

declare module "next-auth" {
  interface Session extends DefaultSession {
    user: DefaultSession["user"] & {
      id: string;
      image: string;
      role: string;
    };
  }

  interface User {
    id: string;
    image: string;
    role: string;
  }
}

This is the session callback I am using.

session: async ({ session, user }) => {
  if (!gymId) {
    return {
      expires: session.expires,
      user: {
        id: user.id,
        role: "user",
        image: user.image,
      },
    };
  }
  const role = await prisma.roles.findUnique({
    where: {
      gymId_userId: {
        gymId: gymId.id,
        userId: user.id,
      },
    },
  });
  session = {
    expires: session.expires,
    user: {
      id: user.id,
      role: role?.name ?? "user",
      image: user.image,
    },
  };
  console.log("Fetching session: ")
  console.log(session)
  return session;
}

// This is a function that I will use when creating the context
export const getServerAuthSession = (ctx: {
  req: GetServerSidePropsContext["req"];
  res: GetServerSidePropsContext["res"];
}) => {
  return getServerSession(ctx.req, ctx.res, authOptions);
};

session: async ({ session, user }) => {
  if (!gymId) {
    return {
      expires: session.expires,
      user: {
        id: user.id,
        role: "user",
        image: user.image,
      },
    };
  }
  const role = await prisma.roles.findUnique({
    where: {
      gymId_userId: {
        gymId: gymId.id,
        userId: user.id,
      },
    },
  });
  session = {
    expires: session.expires,
    user: {
      id: user.id,
      role: role?.name ?? "user",
      image: user.image,
    },
  };
  console.log("Fetching session: ")
  console.log(session)
  return session;
}

// This is a function that I will use when creating the context
export const getServerAuthSession = (ctx: {
  req: GetServerSidePropsContext["req"];
  res: GetServerSidePropsContext["res"];
}) => {
  return getServerSession(ctx.req, ctx.res, authOptions);
};

The console.log is just to see what is happening where (I will include it at the end) I will include the rest of the information in the next message as I reached the character limit.

3 replies

TTCTheo's Typesafe Cult

•Created by Codex on 1/15/2024 in #questions

Prisma ghost connections

1 replies

TTCTheo's Typesafe Cult

•Created by Codex on 9/18/2023 in #questions

Question about useQuery

I have a query set up like follows

const findMembershipQuery = api.manageMembership.searchMembership.useQuery(
    {
      accesses: accesses.join(","),
      timeAccess,
    },
    { enabled: false }
  );

const findMembershipQuery = api.manageMembership.searchMembership.useQuery(
    {
      accesses: accesses.join(","),
      timeAccess,
    },
    { enabled: false }
  );

and I want to refetch this data whenever accesses or timeAccess changes so I used a useEffect, but the problem is if I don't use

if (!findMembershipQuery.isFetched) {
   // Code here
}

if (!findMembershipQuery.isFetched) {
   // Code here
}

inside the useEffect it infinitely calls itself but this prevents it from grabbing the same information more than once even if the previousData is no longer the same. anyone know of a better way to do this?

8 replies

Gaming

Programming