Jacob Posts - Answer Overflow

Jacob

Explore posts from servers

CDCloudflare Developers TTCTheo's Typesafe Cult HHono DTDrizzle Team

•Created by Jacob on 1/8/2025 in #questions

Getting build errors after upgrading to nextjs 15 and react 19

I have just gone and updated my project to nextjs 15 and react 19 and have almost fixed all my issues with the upgrade however i am still running into 1 issue that stops me from building. and i'm not sure why as it gets caused on the /404, /_error and /500 pages.

[Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7B%24%24typeof%2C%20type%2C%20key%2C%20ref%2C%20props%7D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.]
Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7B%24%24typeof%2C%20type%2C%20key%2C%20ref%2C%20props%7D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
Export encountered an error on /_error: /404, exiting the build.

[Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7B%24%24typeof%2C%20type%2C%20key%2C%20ref%2C%20props%7D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.]
Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7B%24%24typeof%2C%20type%2C%20key%2C%20ref%2C%20props%7D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
Export encountered an error on /_error: /404, exiting the build.

the repo: https://github.com/jacobsamo/BuzzTrip/tree/30-update-web-to-nextjs-15-react-19 Not sure why i am receving this error

4 replies

CDCloudflare Developers

•Created by Jacob on 1/8/2025 in #workers-help

Variables and Secrets get cleared when building

1 replies

TTCTheo's Typesafe Cult

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

Error building nextjs application on vercel

When building my application on vercel it fails for some reason and i'm not sure why, it builds fine locally but fails on remote. this is the error i'm getting:

Running "bun run build"
$ next build
  ▲ Next.js 14.2.21
  - Experiments (use with caution):
    · instrumentationHook
   Creating an optimized production build ...
unhandledRejection TypeError: invalid pattern
    at assertValidPattern (/vercel/path0/node_modules/minimatch/minimatch.js:275:11)
    at new Minimatch (/vercel/path0/node_modules/minimatch/minimatch.js:133:3)
    at setopts (/vercel/path0/node_modules/glob/common.js:116:20)
    at new Glob (/vercel/path0/node_modules/glob/glob.js:132:3)
    at Function.glob (/vercel/path0/node_modules/glob/glob.js:72:10)
    at _callee2$ (/vercel/path0/node_modules/@sentry/bundler-plugin-core/dist/cjs/index.js:8345:41)
    at tryCatch (/vercel/path0/node_modules/@sentry/bundler-plugin-core/dist/cjs/index.js:120:17)
    at Generator.<anonymous> (/vercel/path0/node_modules/@sentry/bundler-plugin-core/dist/cjs/index.js:201:22)
    at Generator.next (/vercel/path0/node_modules/@sentry/bundler-plugin-core/dist/cjs/index.js:145:21)
    at asyncGeneratorStep (/vercel/path0/node_modules/@sentry/bundler-plugin-core/dist/cjs/index.js:391:24)
error: script "build" exited with code 1
Error: Command "bun run build" exited with 1

Running "bun run build"
$ next build
  ▲ Next.js 14.2.21
  - Experiments (use with caution):
    · instrumentationHook
   Creating an optimized production build ...
unhandledRejection TypeError: invalid pattern
    at assertValidPattern (/vercel/path0/node_modules/minimatch/minimatch.js:275:11)
    at new Minimatch (/vercel/path0/node_modules/minimatch/minimatch.js:133:3)
    at setopts (/vercel/path0/node_modules/glob/common.js:116:20)
    at new Glob (/vercel/path0/node_modules/glob/glob.js:132:3)
    at Function.glob (/vercel/path0/node_modules/glob/glob.js:72:10)
    at _callee2$ (/vercel/path0/node_modules/@sentry/bundler-plugin-core/dist/cjs/index.js:8345:41)
    at tryCatch (/vercel/path0/node_modules/@sentry/bundler-plugin-core/dist/cjs/index.js:120:17)
    at Generator.<anonymous> (/vercel/path0/node_modules/@sentry/bundler-plugin-core/dist/cjs/index.js:201:22)
    at Generator.next (/vercel/path0/node_modules/@sentry/bundler-plugin-core/dist/cjs/index.js:145:21)
    at asyncGeneratorStep (/vercel/path0/node_modules/@sentry/bundler-plugin-core/dist/cjs/index.js:391:24)
error: script "build" exited with code 1
Error: Command "bun run build" exited with 1

github repo: https://github.com/jacobsamo/BuzzTrip/tree/improve-web

6 replies

TTCTheo's Typesafe Cult

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

Hono RPC not setting cookies on fetch

When using the rpc client in nextjs, it doesn't include the headers for the request like a normal fetch does, this ends up leaving out items like cookies which is needed for authentication on the server.

import type { AppType } from "@buzztrip/api/src";
import { env } from "env";
import { hc } from "hono/client";

export const apiClient = hc<AppType>(env.NEXT_PUBLIC_API_URL!, {
  headers: {
    Authorization: `Bearer ${env.NEXT_PUBLIC_API_SECRET_KEY}`,
  },
});

import type { AppType } from "@buzztrip/api/src";
import { env } from "env";
import { hc } from "hono/client";

export const apiClient = hc<AppType>(env.NEXT_PUBLIC_API_URL!, {
  headers: {
    Authorization: `Bearer ${env.NEXT_PUBLIC_API_SECRET_KEY}`,
  },
});

Since i will mainly being using this API on the client side I have no way to pass in the cookies without passing it from the server which is not feasable. What is a way around this? github: https://github.com/jacobsamo/BuzzTrip/tree/improve-web

2 replies

HHono

•Created by Jacob on 12/5/2024 in #help

Default headers not setting in nextjs rpc requests

import type { AppType } from "@buzztrip/api/src";
import { env } from "env";
import { hc } from "hono/client";

export const apiClient = hc<AppType>(env.NEXT_PUBLIC_API_URL!, {
  headers: {
    Authorization: `Bearer ${env.NEXT_PUBLIC_API_SECRET_KEY}`,
  },
});

import type { AppType } from "@buzztrip/api/src";
import { env } from "env";
import { hc } from "hono/client";

export const apiClient = hc<AppType>(env.NEXT_PUBLIC_API_URL!, {
  headers: {
    Authorization: `Bearer ${env.NEXT_PUBLIC_API_SECRET_KEY}`,
  },
});

Since i will mainly being using this API on the client side I have no way to pass in the cookies without passing it from the server which is not feasable. What is a way around this?

19 replies

TTCTheo's Typesafe Cult

•Created by Jacob on 11/23/2024 in #questions

Shadcn components not working in nextjs 15 / react 19

For some reason my shadcn components are getting this error:

Type error: 'Button' cannot be used as a JSX component.
  Its type 'ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>' is not a valid JSX element type.
    Type 'ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
      Type 'import("G:/GitHub/BuzzTrip/apps/web/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
        Type 'ReactElement<unknown, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
          Property 'children' is missing in type 'ReactElement<unknown, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.

  71 |                 </div>
  72 |                 <div className="flex flex-col gap-2 min-[400px]:flex-row">
> 73 |                   <Button size="lg">Get Started</Button>
     |                    ^
  74 |                   <Button size="lg" variant="outline">
  75 |                     Learn More
  76 |                   </Button>
error: script "build" exited with code 1

Type error: 'Button' cannot be used as a JSX component.
  Its type 'ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>' is not a valid JSX element type.
    Type 'ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
      Type 'import("G:/GitHub/BuzzTrip/apps/web/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
        Type 'ReactElement<unknown, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
          Property 'children' is missing in type 'ReactElement<unknown, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.

  71 |                 </div>
  72 |                 <div className="flex flex-col gap-2 min-[400px]:flex-row">
> 73 |                   <Button size="lg">Get Started</Button>
     |                    ^
  74 |                   <Button size="lg" variant="outline">
  75 |                     Learn More
  76 |                   </Button>
error: script "build" exited with code 1

i am getting this is so many different areas of my app and not sure what to do to fix the issue. \ can anyone help?

5 replies

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

Gaming

Programming