Jacob Posts - Answer Overflow

Jacob

Explore posts from servers

CDCloudflare Developers TTCTheo's Typesafe Cult DTDrizzle Team

Posts Comments

TTCTheo's Typesafe Cult

•Created by Jacob on 10/7/2024 in #questions

Types not matching up when exporting AppType for Hono???

2 replies

TTCTheo's Typesafe Cult

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

Failing to connect to local d1 db with drizzle

So i am having trouble setting up drizzle with cloudflare d1 and i'm not sure why i am running into issues:. When running bun drizzle-kit migrate i receive the following error:

$ bun db:migrate
$ drizzle-kit migrate
No config path provided, using default 'drizzle.config.ts'
Reading config file 'G:\GitHub\BuzzTrip\apps\web\drizzle.config.ts'
Using G:\GitHub\BuzzTrip\apps\web\.wrangler\state\v3\d1\miniflare-D1DatabaseObject\097dd93c38860e13c35b3676a4f13f4950f08ed9c239ec99db5716131b0e2718.sqlite
[⣷] applying migrations...Error: Can't find meta/_journal.json file
    at readMigrationFiles (G:\GitHub\BuzzTrip\node_modules\src\migrator.ts:41:9)
    at migrate (G:\GitHub\BuzzTrip\node_modules\src\libsql\migrator.ts:10:21)
    at migrateFn (G:\GitHub\BuzzTrip\node_modules\drizzle-kit\bin.cjs:72211:18)
    at Object.handler (G:\GitHub\BuzzTrip\node_modules\drizzle-kit\bin.cjs:83593:11)
    at async run (G:\GitHub\BuzzTrip\node_modules\drizzle-kit\bin.cjs:82064:7)
error: script "db:migrate" exited with code 1

$ bun db:migrate
$ drizzle-kit migrate
No config path provided, using default 'drizzle.config.ts'
Reading config file 'G:\GitHub\BuzzTrip\apps\web\drizzle.config.ts'
Using G:\GitHub\BuzzTrip\apps\web\.wrangler\state\v3\d1\miniflare-D1DatabaseObject\097dd93c38860e13c35b3676a4f13f4950f08ed9c239ec99db5716131b0e2718.sqlite
[⣷] applying migrations...Error: Can't find meta/_journal.json file
    at readMigrationFiles (G:\GitHub\BuzzTrip\node_modules\src\migrator.ts:41:9)
    at migrate (G:\GitHub\BuzzTrip\node_modules\src\libsql\migrator.ts:10:21)
    at migrateFn (G:\GitHub\BuzzTrip\node_modules\drizzle-kit\bin.cjs:72211:18)
    at Object.handler (G:\GitHub\BuzzTrip\node_modules\drizzle-kit\bin.cjs:83593:11)
    at async run (G:\GitHub\BuzzTrip\node_modules\drizzle-kit\bin.cjs:82064:7)
error: script "db:migrate" exited with code 1

I have attached my drizzle.config.ts below, Anyone have any ideas on why it might be failing??

3 replies

TTCTheo's Typesafe Cult

•Created by Jacob on 9/3/2024 in #questions

Best image service provider

So i want to store and serve images for a personal maps projects for an alternative to Google My Maps, i want to store images of places in a bucket of sorts and would perfer to not pay as i don't plan for it scale any large than myself and a small group of people. Any recommendations? i will be storing quite a large amount of photos as each marker on the map will probably have 3 - 15 images depending on the place. Solutions i have had a small look into: - Uploadthing - 2Gb free tier (amazing service and love it very much) - Supabase - 1GB free - R2 storage - 10GB free - S3 - 5GB free - Google Cloud storage - 5GB free Does anyone know of any better services? my app will probably be running on Cloudflare pages and using the Google Maps SDK

2 replies

TTCTheo's Typesafe Cult

•Created by Jacob on 8/12/2024 in #questions

What's the best logging service for nextjs?

I am currently looking for a good logging service for my nextjs application, i have gone and tried axiom which i liked however reading through things seemed to run pretty slow in server function with having to clean up afterwards (flushing). I am currently using posthog for my analytics which i really love. I was wondering what are some good solutions for logging? as i am not on the vercel pro/enterprise plan so log drains are no longer available. Solutions i have had a bit of a look at: - axiom - sentry - baselime

2 replies

TTCTheo's Typesafe Cult

•Created by Jacob on 6/27/2024 in #questions

Vercel server environment variables not pulling in

I am currently using using T3 Env for type safe environment variables however on vercel it seems that the server environment variables aren't pulling in for some reason. it builds fine in locally and builds fine using the Vercel CLI using vercel pull and vercel build. I have checked that my environment variables are correct in my settings and they are and are set for the right environments. This is the error I see:

$ next build
 ❌ Invalid environment variables: {
   SUPABASE_URI: [ 'Required' ],
   UNSPLASH_SECRET: [ 'Required' ],
   UPLOADTHING_SECRET: [ 'Required' ],
   UPLOADTHING_APP_ID: [ 'Required' ],
   SUPABASE_SERVICE_ROLE: [ 'Required' ],
   GOOGLE_AI_API_KEY: [ 'Required' ],
   UPSTASH_REDIS_REST_URL: [ 'Required' ],
   UPSTASH_REDIS_REST_TOKEN: [ 'Required' ]
 }
  ⨯ Failed to load next.config.mjs, see more info here https://nextjs.org/docs/messages/next-config-error
 
 > Build error occurred
 Error: Invalid environment variables
     at onValidationError (file:///vercel/path0/node_modules/@t3-oss/env-core/dist/index.js:29:15)
     at createEnv (file:///vercel/path0/node_modules/@t3-oss/env-core/dist/index.js:35:16)
     at createEnv (file:///vercel/path0/node_modules/@t3-oss/env-nextjs/dist/index.js:12:12)
     at file:///vercel/path0/apps/website/env.mjs:4:20
     at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
     at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)
     at async loadConfig (/vercel/path0/node_modules/next/dist/server/config.js:698:36)

$ next build
 ❌ Invalid environment variables: {
   SUPABASE_URI: [ 'Required' ],
   UNSPLASH_SECRET: [ 'Required' ],
   UPLOADTHING_SECRET: [ 'Required' ],
   UPLOADTHING_APP_ID: [ 'Required' ],
   SUPABASE_SERVICE_ROLE: [ 'Required' ],
   GOOGLE_AI_API_KEY: [ 'Required' ],
   UPSTASH_REDIS_REST_URL: [ 'Required' ],
   UPSTASH_REDIS_REST_TOKEN: [ 'Required' ]
 }
  ⨯ Failed to load next.config.mjs, see more info here https://nextjs.org/docs/messages/next-config-error
 
 > Build error occurred
 Error: Invalid environment variables
     at onValidationError (file:///vercel/path0/node_modules/@t3-oss/env-core/dist/index.js:29:15)
     at createEnv (file:///vercel/path0/node_modules/@t3-oss/env-core/dist/index.js:35:16)
     at createEnv (file:///vercel/path0/node_modules/@t3-oss/env-nextjs/dist/index.js:12:12)
     at file:///vercel/path0/apps/website/env.mjs:4:20
     at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
     at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)
     at async loadConfig (/vercel/path0/node_modules/next/dist/server/config.js:698:36)

the repo can be found here: https://github.com/jacobsamo/Mixie/tree/HOT-FIX-typescript-env-errors also logged on vercel discussions: https://github.com/orgs/vercel/discussions/7311

2 replies

TTCTheo's Typesafe Cult

•Created by Jacob on 6/25/2024 in #questions

Connecting to websockets in app router

I am looking to build an application that does the following: - connect to zoom - get users from zoom - subscribe to their status I can’t find anything on websockets for nextjs app router. Does anyone know how I would do this? Would prefer to subscribe on the server best solution i got is to wrap the layout in a client component and the client component gets the users and subscribes to the status however this would be slow

5 replies

TTCTheo's Typesafe Cult

•Created by Jacob on 6/15/2024 in #questions

best way to add an admin portal following best practices

Hi all, i am wanting to add a admin portal to my application https://mixiecooking.com/ this portal would be used for adding blogs, updating privacy policy, terms of service, etc. I am wondering what the best way to do this would be, some options i have thought about - adding the portal as /admin - At [userId]/admin - using a subdomain such as admin.mixiecooking.com however this requires a whole other application to be built and maintained My setup is using a monorepo, project can be found here https://github.com/jacobsamo/Mixie What would the best way to build this?

2 replies

TTCTheo's Typesafe Cult

•Created by Jacob on 2/17/2024 in #questions

Creating beautiful product videos

As i am coming up to my product lanuch for my application https://www.mixiecooking.com/ and other small products that i would like to launch into the future. I want to create beautiful product videos for them but i'm not sure how to. does anyone know how to?

6 replies

TTCTheo's Typesafe Cult

•Created by Jacob on 12/13/2023 in #questions

How to dynamically display icons

So in my app i want to dynamically display icons from a string[] but it doesn't seem to want to work, the icons show in the html but are transparent on the page. the icon component:

import { IconBaseProps } from "react-icons";
import * as MDI from "react-icons/md";

export interface IconProps extends IconBaseProps {
  name: keyof typeof MDI;
  color?: React.CSSProperties["color"] | string;
  size?: number;
}

const Icon = ({
  name = "MdLocationOn",
  color = "#000",
  size = 24,
  ...props
}: IconProps) => {
  const DisplayIcon = MDI[name];

  return (
    <DisplayIcon
      size={size}
      style={{ fill: color, color: "inherit" }}
      {...props}
    />
  );
};

export default Icon;

import { IconBaseProps } from "react-icons";
import * as MDI from "react-icons/md";

export interface IconProps extends IconBaseProps {
  name: keyof typeof MDI;
  color?: React.CSSProperties["color"] | string;
  size?: number;
}

const Icon = ({
  name = "MdLocationOn",
  color = "#000",
  size = 24,
  ...props
}: IconProps) => {
  const DisplayIcon = MDI[name];

  return (
    <DisplayIcon
      size={size}
      style={{ fill: color, color: "inherit" }}
      {...props}
    />
  );
};

export default Icon;

then this is my component rendering the icons:

const iconsList: IconProps["name"][] = [
  "MdOutlineFolder",
  "MdOutlineLocationOn",
  "MdOutlineHiking",
  "MdOutlineBed",
  "MdOutlineDirections",
];

//...
{iconsList.map((icon, index) => {
  return (
    <Button
      onClick={() => setValue("icon", icon)}
      key={index}
      className={cn("group h-8 w-8 text-black", {
        "scale-105 border border-gray-500 shadow-lg": watch("icon") == icon,
      })}
      type="button"
      variant="ghost"
    >
      <Icon name={icon} size={24} />
    </Button>
  );
})}

const iconsList: IconProps["name"][] = [
  "MdOutlineFolder",
  "MdOutlineLocationOn",
  "MdOutlineHiking",
  "MdOutlineBed",
  "MdOutlineDirections",
];

//...
{iconsList.map((icon, index) => {
  return (
    <Button
      onClick={() => setValue("icon", icon)}
      key={index}
      className={cn("group h-8 w-8 text-black", {
        "scale-105 border border-gray-500 shadow-lg": watch("icon") == icon,
      })}
      type="button"
      variant="ghost"
    >
      <Icon name={icon} size={24} />
    </Button>
  );
})}

Is this something i am missing?

2 replies

TTCTheo's Typesafe Cult

•Created by Jacob on 11/17/2023 in #questions

Running into webpack issues for `generateComponents` _uploadthing_react__WEBPACK_IMPORTED_MODULE_0__

I am for some reason running into this webpack issue and i don't know why it was working yesterday.

 ⨯ src\common\lib\utils\uploadthing.ts (5:20) @ generateComponents
 ⨯ TypeError: (0 , _uploadthing_react__WEBPACK_IMPORTED_MODULE_0__.generateComponents) is not a function
    at eval (webpack-internal:///(rsc)/./src/common/lib/utils/uploadthing.ts:9:122)
    at (rsc)/./src/common/lib/utils/uploadthing.ts (.next\server\app\page.js:905:1)
    at __webpack_require__ (.next\server\webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./src/common/lib/utils/index.ts:21:70)
    at (rsc)/./src/common/lib/utils/index.ts (.next\server\app\page.js:861:1)
    at __webpack_require__ (.next\server\webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./src/app/layout.tsx:13:68)
    at (rsc)/./src/app/layout.tsx (.next\server\app\page.js:646:1)
    at Function.__webpack_require__ (.next\server\webpack-runtime.js:33:43)
    at async eq (node_modules\.pnpm\n[email protected][email protected][email protected]\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:401280)
    at async tr (node_modules\.pnpm\n[email protected][email protected][email protected]\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:405046)
    at async tn (node_modules\.pnpm\n[email protected][email protected][email protected]\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:405596)
    at async tu (node_modules\.pnpm\n[email protected][email protected][email protected]\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:409938)
    at async node_modules\.pnpm\n[email protected][email protected][email protected]\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:410457 {
  digest: '2950844787',
  page: '/'
}
 export const { UploadButton, UploadDropzone, Uploader } = generateComponents<OurFileRouter>();

 ⨯ src\common\lib\utils\uploadthing.ts (5:20) @ generateComponents
 ⨯ TypeError: (0 , _uploadthing_react__WEBPACK_IMPORTED_MODULE_0__.generateComponents) is not a function
    at eval (webpack-internal:///(rsc)/./src/common/lib/utils/uploadthing.ts:9:122)
    at (rsc)/./src/common/lib/utils/uploadthing.ts (.next\server\app\page.js:905:1)
    at __webpack_require__ (.next\server\webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./src/common/lib/utils/index.ts:21:70)
    at (rsc)/./src/common/lib/utils/index.ts (.next\server\app\page.js:861:1)
    at __webpack_require__ (.next\server\webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./src/app/layout.tsx:13:68)
    at (rsc)/./src/app/layout.tsx (.next\server\app\page.js:646:1)
    at Function.__webpack_require__ (.next\server\webpack-runtime.js:33:43)
    at async eq (node_modules\.pnpm\n[email protected][email protected][email protected]\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:401280)
    at async tr (node_modules\.pnpm\n[email protected][email protected][email protected]\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:405046)
    at async tn (node_modules\.pnpm\n[email protected][email protected][email protected]\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:405596)
    at async tu (node_modules\.pnpm\n[email protected][email protected][email protected]\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:409938)
    at async node_modules\.pnpm\n[email protected][email protected][email protected]\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:410457 {
  digest: '2950844787',
  page: '/'
}
 export const { UploadButton, UploadDropzone, Uploader } = generateComponents<OurFileRouter>();

package versions: "next": "^14.0.3",, "uploadthing": "^6.0.1"

4 replies

TTCTheo's Typesafe Cult

•Created by Jacob on 11/15/2023 in #questions

Email aren't sending in production

so i am using nextauth for my authentication as part of this users can signin using an email, this will then send them an email with the login code or a link to signin. these emails send in both dev and prod enviorments locally, but won't send on vercel. these are the logs:

  {
    "TimeUTC": "2023-11-15 09:31:24",
    "timestampInMs": 1700040684034,
    "requestPath": "www.meally.com.au/api/auth/signin/email",
    "requestMethod": "POST",
    "responseStatusCode": -10,
    "requestId": "syd1::syd1::7mqhv-1700040673960-095158d1f055",
    "requestUserAgent": [
      "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36"
    ],
    "level": "error",
    "environment": "production",
    "branch": "master",
    "vercelCache": "-",
    "type": "lambda",
    "function": "/api/auth/[...nextauth]",
    "deploymentId": "dpl_Fw4xNjZnsFyQPWbP3sHwL4vrrLAK",
    "lambdaDurationInMs": -1,
    "lambdaRegion": "syd1",
    "lambdaMaxMemoryUsed": -1,
    "lambdaMemorySize": -1,
    "message": "Task timed out after 10.05 seconds\n",
    "projectId": "prj_QZSATJpQEdlMJhwMcZbI2XaNL03r",
    "projectName": ""
  },

  {
    "TimeUTC": "2023-11-15 09:31:24",
    "timestampInMs": 1700040684034,
    "requestPath": "www.meally.com.au/api/auth/signin/email",
    "requestMethod": "POST",
    "responseStatusCode": -10,
    "requestId": "syd1::syd1::7mqhv-1700040673960-095158d1f055",
    "requestUserAgent": [
      "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36"
    ],
    "level": "error",
    "environment": "production",
    "branch": "master",
    "vercelCache": "-",
    "type": "lambda",
    "function": "/api/auth/[...nextauth]",
    "deploymentId": "dpl_Fw4xNjZnsFyQPWbP3sHwL4vrrLAK",
    "lambdaDurationInMs": -1,
    "lambdaRegion": "syd1",
    "lambdaMaxMemoryUsed": -1,
    "lambdaMemorySize": -1,
    "message": "Task timed out after 10.05 seconds\n",
    "projectId": "prj_QZSATJpQEdlMJhwMcZbI2XaNL03r",
    "projectName": ""
  },

2 replies

TTCTheo's Typesafe Cult

•Created by Jacob on 11/3/2023 in #questions

[BUG]: React Hook Form doesn't submit when using drizzle-zod to create schemes to use in zodResolver

When using drizzle-zod to generate schemas from database schemas and using them in the useForm resolvers the onSubmit won't fire at all for some reason, So for example:

export const userSchema = createInsertSchema(users);

export const userSchema = createInsertSchema(users);

and then using it in the useForm

const { handleSubmit, register, control, getValues } = useForm<User>({
    resolver: zodResolver(userSchema),
    defaultValues: async () => {
      const res = await fetch(`/api/users/`)
      const user = (await res.json()) as User;
      return user;
    },
  });

  const onSubmit: SubmitHandler<User> = async (data) => {
    console.log(data)

    await fetch('/api/users/updateUser', {
      method: "PUT",
      body: body: JSON.stringify(data),
    })
  };

const { handleSubmit, register, control, getValues } = useForm<User>({
    resolver: zodResolver(userSchema),
    defaultValues: async () => {
      const res = await fetch(`/api/users/`)
      const user = (await res.json()) as User;
      return user;
    },
  });

  const onSubmit: SubmitHandler<User> = async (data) => {
    console.log(data)

    await fetch('/api/users/updateUser', {
      method: "PUT",
      body: body: JSON.stringify(data),
    })
  };

in this example when you click the Submit from the form it doesn't work at all. however if you build your own schema using zod it works fine. For reference this was working about a about a week ago. No errors show in the browser console or terminal, so i don't know what is up there I have posted issues on react-hook-form and drizzle-orm however I'm not sure which team is that the problem is coming from https://github.com/react-hook-form/resolvers/issues/642 https://github.com/drizzle-team/drizzle-orm/issues/1448 To Reproduce Steps to reproduce the behavior: 1. create a schema using zod 2. create a zod schema using drizzle-zod and createInsertSchema 3. import that schema into a useForm resolver 4. try submitting the form (should not work) Codesandbox link very simple application that doesn't seem to submit: https://codesandbox.io/p/sandbox/react-hook-form-zod-resolver-not-working-9c7qn9 Environment & setup Operating systems that is is occuring in: - Mac ventura 13.5.2, - Windows 10 - Windows 11 - Codesandbox Browsers: - Chrome Versions of packages: - react-hook-form: 7.47.0 - @hookform/resolvers: 3.3.2 - drizzle-orm: 0.28.6 - drizzle-zod: 0.5.1 - drizzle-kit: 0.19.13

2 replies

TTCTheo's Typesafe Cult

•Created by Jacob on 11/3/2023 in #questions

Having an issue when using Nextauth for signing in getting `Invalid Compact JWE`

So i have adjusted my User interface and what Nextauth session return. this is my new interfaces:

declare module "next-auth" {
  interface Session {
    user: {
      id: string;
      bio: string;
      userName: string;
      theme: TTheme;
      font: TFont;
      email: string;
    } & DefaultSession["user"];
  }
  interface User extends DbUser {}
}

declare module "next-auth" {
  interface Session {
    user: {
      id: string;
      bio: string;
      userName: string;
      theme: TTheme;
      font: TFont;
      email: string;
    } & DefaultSession["user"];
  }
  interface User extends DbUser {}
}

since then i seem to be getting this error:

[next-auth][error][JWT_SESSION_ERROR] 
https://next-auth.js.org/errors#jwt_session_error Invalid Compact JWE {
  message: 'Invalid Compact JWE',
  stack: 'JWEInvalid: Invalid Compact JWE\n' +
    '    at compactDecrypt (webpack-internal:///(rsc)/../../node_modules/.pnpm/[email protected]/node_modules/jose/dist/node/cjs/jwe/compact/decrypt.js:18:15)\n' +
    '    at jwtDecrypt (webpack-internal:///(rsc)/../../node_modules/.pnpm/[email protected]/node_modules/jose/dist/node/cjs/jwt/decrypt.js:10:61)\n' +
    '    at Object.decode (webpack-internal:///(rsc)/../../node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next-auth/jwt/index.js:44:52)\n' +
    '    at async Object.session (webpack-internal:///(rsc)/../../node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next-auth/core/routes/session.js:25:34)\n' +
    '    at async AuthHandler (webpack-internal:///(rsc)/../../node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next-auth/core/index.js:161:37)\n' +
    '    at async getServerSession (webpack-internal:///(rsc)/../../node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next-auth/next/index.js:126:21)\n' +
    '    at async RootLayout (webpack-internal:///(rsc)/./src/app/layout.tsx:100:21)',
  name: 'JWEInvalid'
}

[next-auth][error][JWT_SESSION_ERROR] 
https://next-auth.js.org/errors#jwt_session_error Invalid Compact JWE {
  message: 'Invalid Compact JWE',
  stack: 'JWEInvalid: Invalid Compact JWE\n' +
    '    at compactDecrypt (webpack-internal:///(rsc)/../../node_modules/.pnpm/[email protected]/node_modules/jose/dist/node/cjs/jwe/compact/decrypt.js:18:15)\n' +
    '    at jwtDecrypt (webpack-internal:///(rsc)/../../node_modules/.pnpm/[email protected]/node_modules/jose/dist/node/cjs/jwt/decrypt.js:10:61)\n' +
    '    at Object.decode (webpack-internal:///(rsc)/../../node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next-auth/jwt/index.js:44:52)\n' +
    '    at async Object.session (webpack-internal:///(rsc)/../../node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next-auth/core/routes/session.js:25:34)\n' +
    '    at async AuthHandler (webpack-internal:///(rsc)/../../node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next-auth/core/index.js:161:37)\n' +
    '    at async getServerSession (webpack-internal:///(rsc)/../../node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/next-auth/next/index.js:126:21)\n' +
    '    at async RootLayout (webpack-internal:///(rsc)/./src/app/layout.tsx:100:21)',
  name: 'JWEInvalid'
}

Even following what is says in the link i can't figure it out

3 replies

TTCTheo's Typesafe Cult

•Created by Jacob on 10/24/2023 in #questions

Struggling to use VERCEL_URL with `@t3-oss/env-nextjs`

So i am trying to use the VERCEL_URL for my app url however I'm having issue on how to use it and still fullfil the types. my env.mjs

 import { createEnv } from "@t3-oss/env-nextjs";
import { z } from "zod";

export const env = createEnv({
  server: {
    // .... server items
  },
  client: {
    NEXT_API_APP_TOKEN: z.string().min(1),
    NEXT_PUBLIC_APP_URL: z.string().url(),
  },
  runtimeEnv: {
    // App
    NEXT_PUBLIC_APP_URL: process.env.NEXT_PUBLIC_APP_URL,
    NEXT_API_APP_TOKEN: process.env.NEXT_API_APP_TOKEN,

    // ... set all server env's
  },
});

 import { createEnv } from "@t3-oss/env-nextjs";
import { z } from "zod";

export const env = createEnv({
  server: {
    // .... server items
  },
  client: {
    NEXT_API_APP_TOKEN: z.string().min(1),
    NEXT_PUBLIC_APP_URL: z.string().url(),
  },
  runtimeEnv: {
    // App
    NEXT_PUBLIC_APP_URL: process.env.NEXT_PUBLIC_APP_URL,
    NEXT_API_APP_TOKEN: process.env.NEXT_API_APP_TOKEN,

    // ... set all server env's
  },
});

my nextjs.config.mjs

if (process.env.NODE_ENV === "development") {
  process.env.NEXT_PUBLIC_APP_URL = "http://localhost:3000";
}

if (process.env.VERCEL_URL && !process.env.NEXT_PUBLIC_APP_URL) {
  process.env.NEXT_PUBLIC_APP_URL = `https://${process.env.VERCEL_URL}`;
}

if (process.env.NODE_ENV === "development") {
  process.env.NEXT_PUBLIC_APP_URL = "http://localhost:3000";
}

if (process.env.VERCEL_URL && !process.env.NEXT_PUBLIC_APP_URL) {
  process.env.NEXT_PUBLIC_APP_URL = `https://${process.env.VERCEL_URL}`;
}

4 replies

TTCTheo's Typesafe Cult

•Created by Jacob on 10/7/2023 in #questions

Custom fetch handler, not working with relative paths

so when using fetch you can do this: fetch("/api/users) which is great then you don't have to rely on an envioment varibale or URL changing. so in my app i have created a custom fetch handler, this sets things like authorization, revalidation and anything else i would want, however it doesn't seem to want to work with relative paths. Custom request:

interface BaseRequest {
  url: RequestInfo | URL;
  method: "GET" | "POST" | "PUT" | "DELETE";
  data?: any;
  params?: any;
  headers?: HeadersInit;
  nextOptions?: NextFetchRequestConfig;
}

export const Request = async <T>(
  url: string,
  {
    method = "GET",
    data,
    params,
    headers,
    nextOptions,
  }: Partial<BaseRequest> = {}
) => {
  const jwt = new JWT();

  const req = await fetch(url, {
    method: method,
    body: JSON.stringify(data),
    headers: {
      ...headers,
      authorization: await jwt.signJWT(),
    },
    next: {
      ...nextOptions,
      revalidate: 60 * 60 * 24,
    },
  });

  return (await req.json()) as T;
};

interface BaseRequest {
  url: RequestInfo | URL;
  method: "GET" | "POST" | "PUT" | "DELETE";
  data?: any;
  params?: any;
  headers?: HeadersInit;
  nextOptions?: NextFetchRequestConfig;
}

export const Request = async <T>(
  url: string,
  {
    method = "GET",
    data,
    params,
    headers,
    nextOptions,
  }: Partial<BaseRequest> = {}
) => {
  const jwt = new JWT();

  const req = await fetch(url, {
    method: method,
    body: JSON.stringify(data),
    headers: {
      ...headers,
      authorization: await jwt.signJWT(),
    },
    next: {
      ...nextOptions,
      revalidate: 60 * 60 * 24,
    },
  });

  return (await req.json()) as T;
};

so this is what i want to do is Request("/api/users") rather then Reqeust("${baseUrl}/api/users") beacuse doing this seems to fail in production builds in Vercel as the routes don't exist on the production url I am using Nextjs and Vercel to deploy my project for anyopne wondering

2 replies

TTCTheo's Typesafe Cult

•Created by Jacob on 9/14/2023 in #questions

custom verify-request page nextauth

So i want users to be able to copy the code that is sent to them by an email and put it into the input to verfiy the email signin, however i can't seem and documentation on how to do it or any examples. does anyone know how i could achive this?

3 replies

TTCTheo's Typesafe Cult

•Created by Jacob on 8/19/2023 in #questions

Authenicating API routes to be only be request by same-origin Nextjs 13

So i am looking to lock down some of my API routes to be only requested by my domain and any subdomains but not any other person that might try to do the same. How would i do something like this in Nextjs 13 app router?

2 replies

TTCTheo's Typesafe Cult

•Created by Jacob on 7/29/2023 in #questions

One to Many connection not working correctly in Dirzzle

So i am trying to get a one to many relation working with drizzle and it keeping this error: Error: There is not enough information to infer relation "recipes.ingredients" this is my relation for the recipes these are all my relations for the recipe

// recipes relation
export const recipesRelation = relations(recipes, ({ one, many }) => ({
  ingredients: many(ingredients),
  info: one(info, {
    fields: [recipes.uid],
    references: [info.recipeId],
  }),
  ratings: one(ratings, {
    fields: [recipes.uid],
    references: [ratings.recipeId],
  }),
}));

export const ingredientsRelation = relations(recipes, ({ one } => ({
  ingredients: one(ingredients, {
    fields: [recipes.uid],
    references: [ingredients.recipeId],
  }),
}));

export const infoRelations = relations(recipes, ({ one }) => ({
  info: one(info, {
    fields: [recipes.uid],
    references: [info.recipeId],
  }),
}));

export const ratings = mysqlTable('ratings', {
  recipeId: char('recipeId', { length: 36 }).primaryKey().notNull(),
  userId: varchar('userId', { length: 191 }).notNull(),
  rating: tinyint('rating').notNull(),
});

// recipes relation
export const recipesRelation = relations(recipes, ({ one, many }) => ({
  ingredients: many(ingredients),
  info: one(info, {
    fields: [recipes.uid],
    references: [info.recipeId],
  }),
  ratings: one(ratings, {
    fields: [recipes.uid],
    references: [ratings.recipeId],
  }),
}));

export const ingredientsRelation = relations(recipes, ({ one } => ({
  ingredients: one(ingredients, {
    fields: [recipes.uid],
    references: [ingredients.recipeId],
  }),
}));

export const infoRelations = relations(recipes, ({ one }) => ({
  info: one(info, {
    fields: [recipes.uid],
    references: [info.recipeId],
  }),
}));

export const ratings = mysqlTable('ratings', {
  recipeId: char('recipeId', { length: 36 }).primaryKey().notNull(),
  userId: varchar('userId', { length: 191 }).notNull(),
  rating: tinyint('rating').notNull(),
});

this is the query i am running

const recipe = await db.query.recipes.findMany({
    with: {
      info: true,
      ingredients: true,
      ratings: true,
    }
  });

const recipe = await db.query.recipes.findMany({
    with: {
      info: true,
      ingredients: true,
      ratings: true,
    }
  });

when i run it without the ingredients: true it works and gets the info so not really sure why the many(ingredients) is not working

4 replies

TTCTheo's Typesafe Cult

•Created by Jacob on 7/15/2023 in #questions

Drizzle not pulling in environment variables

So originally my app was fine with the env variables originally but now it is not working. I am not sure what is going on. I have tried to use the dotenv package but that did not work. my drizzle config

import { type Config } from 'drizzle-kit';
import { env } from './env.mjs';

import * as dotenv from "dotenv";
dotenv.config();

export default {
  schema: './src/db/schemas/',
  out: './src/db/migrations',
  driver: 'mysql2',
  dbCredentials: {
    connectionString: env.DATABASE_URL,
  },
} satisfies Config;

import { type Config } from 'drizzle-kit';
import { env } from './env.mjs';

import * as dotenv from "dotenv";
dotenv.config();

export default {
  schema: './src/db/schemas/',
  out: './src/db/migrations',
  driver: 'mysql2',
  dbCredentials: {
    connectionString: env.DATABASE_URL,
  },
} satisfies Config;

the error i am getting

pnpm db:push

> [email protected] db:push G:\GitHub\Meally\apps\meally
> drizzle-kit push:mysql --config=drizzle.config.ts

drizzle-kit: v0.19.5
drizzle-orm: v0.27.2

Reading config file 'G:\GitHub\Meally\apps\meally\drizzle.config.ts'
❌ Invalid environment variables: {
  DATABASE_URL: [ 'Required' ],
  DATABASE_HOST: [ 'Required' ],
  DATABASE_USERNAME: [ 'Required' ],
  DATABASE_PASSWORD: [ 'Required' ],
  NODE_ENV: [ 'Required' ],
  NEXTAUTH_URL: [ 'Required' ],
  NEXTAUTH_SECRET: [ 'Required' ],
  GITHUB_CLIENT_ID: [ 'Required' ],
  GITHUB_CLIENT_SECRET: [ 'Required' ],
  GOOGLE_CLIENT_ID: [ 'Required' ],
  GOOGLE_CLIENT_SECRET: [ 'Required' ],
  FACEBOOK_APP_ID: [ 'Required' ],
  FACEBOOK_CLIENT_SECRET: [ 'Required' ],
  TWITTER_API_KEY: [ 'Required' ],
  TWITTER_API_SECRET: [ 'Required' ],
  NEXT_PUBLIC_FIREBASE_API_KEY: [ 'Required' ],
  NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: [ 'Required' ],
  NEXT_PUBLIC_FIREBASE_PROJECT_ID: [ 'Required' ],
  NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET: [ 'Required' ],
  NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: [ 'Required' ],
  NEXT_PUBLIC_FIREBASE_APP_ID: [ 'Required' ],
  NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID: [ 'Required' ],
  NEXT_PUBLIC_APP_URL: [ 'Required' ]
}
G:\GitHub\Meally\node_modules\.pnpm\@[email protected][email protected][email protected]\node_modules\@t3-oss\core\index.ts:205
        !prop.startsWith(opts.clientPrefix) &&

pnpm db:push

> [email protected] db:push G:\GitHub\Meally\apps\meally
> drizzle-kit push:mysql --config=drizzle.config.ts

drizzle-kit: v0.19.5
drizzle-orm: v0.27.2

Reading config file 'G:\GitHub\Meally\apps\meally\drizzle.config.ts'
❌ Invalid environment variables: {
  DATABASE_URL: [ 'Required' ],
  DATABASE_HOST: [ 'Required' ],
  DATABASE_USERNAME: [ 'Required' ],
  DATABASE_PASSWORD: [ 'Required' ],
  NODE_ENV: [ 'Required' ],
  NEXTAUTH_URL: [ 'Required' ],
  NEXTAUTH_SECRET: [ 'Required' ],
  GITHUB_CLIENT_ID: [ 'Required' ],
  GITHUB_CLIENT_SECRET: [ 'Required' ],
  GOOGLE_CLIENT_ID: [ 'Required' ],
  GOOGLE_CLIENT_SECRET: [ 'Required' ],
  FACEBOOK_APP_ID: [ 'Required' ],
  FACEBOOK_CLIENT_SECRET: [ 'Required' ],
  TWITTER_API_KEY: [ 'Required' ],
  TWITTER_API_SECRET: [ 'Required' ],
  NEXT_PUBLIC_FIREBASE_API_KEY: [ 'Required' ],
  NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: [ 'Required' ],
  NEXT_PUBLIC_FIREBASE_PROJECT_ID: [ 'Required' ],
  NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET: [ 'Required' ],
  NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: [ 'Required' ],
  NEXT_PUBLIC_FIREBASE_APP_ID: [ 'Required' ],
  NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID: [ 'Required' ],
  NEXT_PUBLIC_APP_URL: [ 'Required' ]
}
G:\GitHub\Meally\node_modules\.pnpm\@[email protected][email protected][email protected]\node_modules\@t3-oss\core\index.ts:205
        !prop.startsWith(opts.clientPrefix) &&

8 replies

Gaming

Programming