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

CDCloudflare Developers

•Created by Jacob on 9/17/2024 in #pages-help

Getting 500 internal server error - Nextjs

For some reason my application is getting 500 errors when deployed, works fine when building and running locally but fails in production. When i check the logs i get this:

{
  "truncated": false,
  "outcome": "ok",
  "scriptName": "pages-worker--2194227-production",
  "diagnosticsChannelEvents": [],
  "exceptions": [],
  "logs": [
    {
      "message": [
        "Error: An error occurred while evaluating the target edge function (__next-on-pages-dist__/functions/src/middleware.func.js)"
      ],
      "level": "error",
      "timestamp": 1726567894480
    }
  ],
   // ... rest is attached in json file
}

{
  "truncated": false,
  "outcome": "ok",
  "scriptName": "pages-worker--2194227-production",
  "diagnosticsChannelEvents": [],
  "exceptions": [],
  "logs": [
    {
      "message": [
        "Error: An error occurred while evaluating the target edge function (__next-on-pages-dist__/functions/src/middleware.func.js)"
      ],
      "level": "error",
      "timestamp": 1726567894480
    }
  ],
   // ... rest is attached in json file
}

The build logs seem to be totally fine so not sure what is up Links: https://github.com/jacobsamo/buzztrip https://buzztrip.co https://buzztrip.pages.dev https://0c1dc957.buzztrip.pages.dev

1 replies

CDCloudflare Developers

•Created by Jacob on 9/9/2024 in #pages-help

Configuring a monorepo

So i am looking to configure a monorepo for Cloudflare Pages, i have a Nextjs app under /apps/web which will need @cloudflare/next-on-pages to build. However i can't figure out how to get it all working. My repo: https://github.com/jacobsamo/BuzzTrip

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

CDCloudflare Developers

•Created by Jacob on 8/4/2024 in #pages-help

Bun failing builds

I want to use bun to run my cloudflare builds however it fails every time and not sure why, this is my stack trace:

12:05:01.271    Cloning repository...
12:05:01.953    From https://github.com/jacobsamo/website
12:05:01.954     * branch            e783baa52cc0afe5427458b8a143b9beb00a07f4 -> FETCH_HEAD
12:05:01.954    
12:05:01.991    HEAD is now at e783baa set package manager in package.json
12:05:01.992    
12:05:02.085    
12:05:02.085    Using v2 root directory strategy
12:05:02.115    Success: Finished cloning repository files
12:05:07.642    Checking for configuration in a wrangler.toml configuration file (BETA)
12:05:07.643    
12:05:07.643    Found wrangler.toml file. Reading build configuration...
12:05:07.649    pages_build_output_dir: dist
12:05:07.649    Build environment variables: (none found)
12:05:07.764    Successfully read wrangler.toml file.
12:05:07.922    Detected the following tools from environment: [email protected], [email protected]
12:05:07.923    Installing bun 1.1.22
12:05:08.071    Downloading Bun v1.1.22...
12:05:08.279    curl: (22) The requested URL returned error: 404
12:05:08.283    Fail: Couldn't download the Bun binary from https://github.com/oven-sh/bun/releases/download/bun-v1.1.22/bun-linux-x64.zip
12:05:08.289    Fail: Failed to download Bun v1.1.22
12:05:08.300    Error: Exit with error code: 1
12:05:08.301        at ChildProcess.<anonymous> (/snapshot/dist/run-build.js)
12:05:08.301        at Object.onceWrapper (node:events:652:26)
12:05:08.301        at ChildProcess.emit (node:events:537:28)
12:05:08.301        at ChildProcess._handle.onexit (node:internal/child_process:291:12)
12:05:08.311    Failed: build command exited with code: 1
12:05:09.461    Failed: error occurred while running build command

12:05:01.271    Cloning repository...
12:05:01.953    From https://github.com/jacobsamo/website
12:05:01.954     * branch            e783baa52cc0afe5427458b8a143b9beb00a07f4 -> FETCH_HEAD
12:05:01.954    
12:05:01.991    HEAD is now at e783baa set package manager in package.json
12:05:01.992    
12:05:02.085    
12:05:02.085    Using v2 root directory strategy
12:05:02.115    Success: Finished cloning repository files
12:05:07.642    Checking for configuration in a wrangler.toml configuration file (BETA)
12:05:07.643    
12:05:07.643    Found wrangler.toml file. Reading build configuration...
12:05:07.649    pages_build_output_dir: dist
12:05:07.649    Build environment variables: (none found)
12:05:07.764    Successfully read wrangler.toml file.
12:05:07.922    Detected the following tools from environment: [email protected], [email protected]
12:05:07.923    Installing bun 1.1.22
12:05:08.071    Downloading Bun v1.1.22...
12:05:08.279    curl: (22) The requested URL returned error: 404
12:05:08.283    Fail: Couldn't download the Bun binary from https://github.com/oven-sh/bun/releases/download/bun-v1.1.22/bun-linux-x64.zip
12:05:08.289    Fail: Failed to download Bun v1.1.22
12:05:08.300    Error: Exit with error code: 1
12:05:08.301        at ChildProcess.<anonymous> (/snapshot/dist/run-build.js)
12:05:08.301        at Object.onceWrapper (node:events:652:26)
12:05:08.301        at ChildProcess.emit (node:events:537:28)
12:05:08.301        at ChildProcess._handle.onexit (node:internal/child_process:291:12)
12:05:08.311    Failed: build command exited with code: 1
12:05:09.461    Failed: error occurred while running build command

I have removed the bun.lockb and added to .gitignore beacuse that too was failing now it is set through package.json with this line: "packageManager": "[email protected]" not sure how to fix this

7 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

CDCloudflare Developers

•Created by Jacob on 2/24/2024 in #pages-help

build exceeding memory limit

so i have a pretty large nextjs application and it builds fine without having export const runtime = "edge"; set however once i set this in my layout.tsx it maxs out for some reason

 <--- Last few GCs --->
 
 [15444:0000020BA9850080]    56838 ms: Mark-Compact (reduce) 3066.7 (3085.9) -> 3065.8 (3085.9) MB, 212.79 / 0.00 ms  (average m05) allocation failure; scavenge might not succeed
 [15444:0000020BA9850080]    57296 ms: Mark-Compact (reduce) 3066.8 (3085.9) -> 3066.1 (3086.1) MB, 457.69 / 0.00 ms  (average m02) allocation failure; scavenge might not succeed
 
 <--- JS stacktrace --->
 
 FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
 ----- Native stack trace -----
 
  1: 00007FF6558EC44B node::SetCppgcReference+15579
  2: 00007FF6558634B4 DSA_meth_get_flags+87796
  3: 00007FF6563263F1 v8::Isolate::ReportExternalAllocationLimitReached+65
  4: 00007FF65630FDA8 v8::Function::Experimental_IsNopFunction+1192
  5: 00007FF656160C00 v8::PrimitiveArray::Length+426608
  6: 00007FF65615DEE5 v8::PrimitiveArray::Length+415061
  7: 00007FF6561732E4 v8::PrimitiveArray::Length+502100
  8: 00007FF656173BA8 v8::PrimitiveArray::Length+504344
  9: 00007FF656183CC9 v8::PrimitiveArray::Length+570169
 10: 00007FF655E5172B v8::CodeEvent::GetFunctionName+112299
 11: 00007FF5F63A667A
 Compiler edge-server unexpectedly exited with code: 134 and signal: null
 
 > Build error occurred
2.0\node_modules\next\dist\compiled\jest-worker\index.js:1:12545)
     at ChildProcess.emit (node:events:531:35)
     at ChildProcess._handle.onexit (node:internal/child_process:294:12) {
   type: 'WorkerError'
 }
  ELIFECYCLE  Command failed with exit code 1.
 ERROR: command finished with error: command (G:\GitHub\mixie-normal-image\apps\mixie) C:\Users\jacob\AppData\Local\pnpm\pnpm.CMD run build exited (1)
: command (G:\GitHub\mixie-normal-image\apps\mixie) C:\Users\jacob\AppData\Local\pnpm\pnpm.CMD run build exited (1)

 <--- Last few GCs --->
 
 [15444:0000020BA9850080]    56838 ms: Mark-Compact (reduce) 3066.7 (3085.9) -> 3065.8 (3085.9) MB, 212.79 / 0.00 ms  (average m05) allocation failure; scavenge might not succeed
 [15444:0000020BA9850080]    57296 ms: Mark-Compact (reduce) 3066.8 (3085.9) -> 3066.1 (3086.1) MB, 457.69 / 0.00 ms  (average m02) allocation failure; scavenge might not succeed
 
 <--- JS stacktrace --->
 
 FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
 ----- Native stack trace -----
 
  1: 00007FF6558EC44B node::SetCppgcReference+15579
  2: 00007FF6558634B4 DSA_meth_get_flags+87796
  3: 00007FF6563263F1 v8::Isolate::ReportExternalAllocationLimitReached+65
  4: 00007FF65630FDA8 v8::Function::Experimental_IsNopFunction+1192
  5: 00007FF656160C00 v8::PrimitiveArray::Length+426608
  6: 00007FF65615DEE5 v8::PrimitiveArray::Length+415061
  7: 00007FF6561732E4 v8::PrimitiveArray::Length+502100
  8: 00007FF656173BA8 v8::PrimitiveArray::Length+504344
  9: 00007FF656183CC9 v8::PrimitiveArray::Length+570169
 10: 00007FF655E5172B v8::CodeEvent::GetFunctionName+112299
 11: 00007FF5F63A667A
 Compiler edge-server unexpectedly exited with code: 134 and signal: null
 
 > Build error occurred
2.0\node_modules\next\dist\compiled\jest-worker\index.js:1:12545)
     at ChildProcess.emit (node:events:531:35)
     at ChildProcess._handle.onexit (node:internal/child_process:294:12) {
   type: 'WorkerError'
 }
  ELIFECYCLE  Command failed with exit code 1.
 ERROR: command finished with error: command (G:\GitHub\mixie-normal-image\apps\mixie) C:\Users\jacob\AppData\Local\pnpm\pnpm.CMD run build exited (1)
: command (G:\GitHub\mixie-normal-image\apps\mixie) C:\Users\jacob\AppData\Local\pnpm\pnpm.CMD run build exited (1)

3 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

DTDrizzle Team

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

[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

1 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),
    })
  };

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

Gaming

Programming