Duckit69 Posts - Answer Overflow

Duckit69

Explore posts from servers

•Created by Duckit69 on 4/15/2025 in #help

Invalid hook call

I dont even know how to tackle the problem, all i know it has something to deal with

export const useAuth = () => {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error("useAuth must be used within an AuthProvider");
  }
  return context;
};

export const useAuth = () => {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error("useAuth must be used within an AuthProvider");
  }
  return context;
};

The error:

SignInForm.tsx:63 Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.
    at useAuth (AuthContext.tsx:21:19)
    at axios.tsx:24:32
    at async onSubmit (SignInForm.tsx:41:22)

SignInForm.tsx:63 Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.
    at useAuth (AuthContext.tsx:21:19)
    at axios.tsx:24:32
    at async onSubmit (SignInForm.tsx:41:22)

` the AuthContext.tsx

import { createContext, useContext, useState, ReactNode } from "react";

interface AuthContextType {
  accessToken: string | null;
  setAccessToken: (token: string | null) => void;
}

const AuthContext = createContext<AuthContextType | undefined>(undefined);

export const AuthProvider = ({ children }: { children: ReactNode }) => {
  const [accessToken, setAccessToken] = useState<string | null>(null);

  return (
    <AuthContext.Provider value={{ accessToken, setAccessToken }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error("useAuth must be used within an AuthProvider");
  }
  return context;
};

import { createContext, useContext, useState, ReactNode } from "react";

interface AuthContextType {
  accessToken: string | null;
  setAccessToken: (token: string | null) => void;
}

const AuthContext = createContext<AuthContextType | undefined>(undefined);

export const AuthProvider = ({ children }: { children: ReactNode }) => {
  const [accessToken, setAccessToken] = useState<string | null>(null);

  return (
    <AuthContext.Provider value={{ accessToken, setAccessToken }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error("useAuth must be used within an AuthProvider");
  }
  return context;
};

2 replies

KPCKevin Powell - Community

•Created by Duckit69 on 4/14/2025 in #help

JWT TOKEN

I need an example of how to store the accessToken in memory and refresh token in httponly cookie ( i am using react axios and express ) a simple writted code/good video ( preferably a written guide/ or justa bunch of code ) PLEASe

9 replies

KPCKevin Powell - Community

•Created by Duckit69 on 4/10/2025 in #help

Form React

i see ppl use useState hook when creating forms why would i need it for except for running validation on each input seperatly what is the drawback of using the FormData class

3 replies

KPCKevin Powell - Community

•Created by Duckit69 on 4/4/2025 in #help

Hero Section

23 replies

PPrisma

•Created by Duckit69 on 3/30/2025 in #help-and-questions

InitializationError

this is my controller async function signUp(req: Request, res: Response) { req.body.password = await hashPassword(req.body.password); req.body.birthDate = new Date(req.body.birthDate).toISOString(); try { delete req.body.repeat_password; const user = await User.createUser(req.body); res.status(200).json(user); } catch (error) { if (error instanceof PrismaClientKnownRequestError) res.status(400).json({ code: error.code, message: error.message }); else if (error instanceof Error) res.status(400).json({ message: error.message || "Error Signing up user", }); else res.status(400).json(error); } } and this is my model function import { Prisma, PrismaClient } from "@prisma/client"; const prisma = new PrismaClient(); async function createUser(user: User) { try { const result = await prisma.user.create({ data: { username: user.username, birthDate: user.birthDate, password: user.password, }, }); return result; } catch (error) { if (error instanceof Prisma.PrismaClientKnownRequestError) throw error; throw error; } } when i request to sign up user it return this error { "message": "\nInvalid prisma.user.create() invocation in\nC:\Users\ghera\OneDrive\Desktop\GithubRepo\Book_Tracker\server\src\models\userModel.ts:29:38\n\n 26 \n 27 async function createUser(user: User) {\n 28 try {\n→ 29 const result = await prisma.user.create(\nerror: Environment variable not found: DATABASE_URL." } Other models works find ( book model Category Model ) except for User model throws this error I tried running prisma related commands to see if there is a connection and no i didnt face any error

3 replies

KPCKevin Powell - Community

•Created by Duckit69 on 3/30/2025 in #back-end

Problem with Prisma

this is my controller

async function signUp(req: Request, res: Response) {
  req.body.password = await hashPassword(req.body.password);
  req.body.birthDate = new Date(req.body.birthDate).toISOString();
  try {
    delete req.body.repeat_password;
    const user = await User.createUser(req.body);
    res.status(200).json(user);
  } catch (error) {
    if (error instanceof PrismaClientKnownRequestError)
      res.status(400).json({ code: error.code, message: error.message });
    else if (error instanceof Error)
      res.status(400).json({
        message: error.message || "Error Signing up user",
      });
    else res.status(400).json(error);
  }
}

and this is my model function

import { Prisma, PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();
async function createUser(user: User) {
  try {
    const result = await prisma.user.create({
      data: {
        username: user.username,
        birthDate: user.birthDate,
        password: user.password,
      },
    });
    return result;
  } catch (error) {
    if (error instanceof Prisma.PrismaClientKnownRequestError) throw error;
    throw error;
  }
}

when i request to sign up user it return this error

{
    "message": "\nInvalid

prisma.user.create()

 invocation in\nC:\\Users\\ghera\\OneDrive\\Desktop\\GithubRepo\\Book_Tracker\\server\\src\\models\\userModel.ts:29:38\n\n  26 \n  27 async function createUser(user: User) {\n  28   try {\n→ 29     const result = await prisma.user.create(\nerror: Environment variable not found: DATABASE_URL."
}

i tried other functions and they work fine ( as expected ) retrieving books from data works fine etc...

8 replies

KPCKevin Powell - Community

•Created by Duckit69 on 3/29/2025 in #front-end

Styling in React

this is my first react project and i have a question regarding styling my webpages do i build html css ( seperatly and have an idea about what css classes i should have etc ) or build my react components and go from there

8 replies

KPCKevin Powell - Community

•Created by Duckit69 on 3/23/2025 in #back-end

Having issue with error types in TypeScript

async function getUserById(req: Request, res: Response) {
  const userId = parseInt(req.params.id);
  try {
    const user = await prisma.user.findUniqueOrThrow({
      where: {
        id: userId,
      },
    });
    res.status(200).json(user);
  } catch (error: Prisma.PrismaClientKnownRequestError) {
    res.status(404).json({ message: error.meta });
  }
}

problem: TSError: ⨯ Unable to compile TypeScript: controllers/userController/userController.ts:36:19 - error TS1196: Catch clause variable type annotation must be 'any' or 'unknown' if specified. the error returned is of type Prisma.PrismaClientKnownRequestError i dont quite understand the problem

3 replies

Gaming

Programming