Jacob Comments - Answer Overflow

Jacob

Explore posts from servers

CDCloudflare Developers TTCTheo's Typesafe Cult HHono DTDrizzle Team

Posts Comments

TTCTheo's Typesafe Cult

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

Getting build errors after upgrading to nextjs 15 and react 19

How would I go about that?

4 replies

TTCTheo's Typesafe Cult

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

Error building nextjs application on vercel

The issue seemed to be the following: 1. instrumentationHook was not set in nextjs config:

  experimental: {
    instrumentationHook: true,
  },

  experimental: {
    instrumentationHook: true,
  },

2. Incorrect sentry version 3. missing configs

6 replies

TTCTheo's Typesafe Cult

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

Error building nextjs application on vercel

Yes but no

6 replies

TTCTheo's Typesafe Cult

•Created by Crian. on 11/23/2024 in #questions

T3 Turbo Add Another App

if your have any more questions feel free to reach out

4 replies

TTCTheo's Typesafe Cult

•Created by Crian. on 11/23/2024 in #questions

T3 Turbo Add Another App

depends on what your adding, if we are adding a new app e.g web app, mobile app, etc: 1. First we need to go to /apps 2. create a new folder with the name of the app or use a setup tool e.g nextjs: npx create-next-app@latest my-cool-app (this will create a new app with the name my-cool-app it will also prompt you for a name when creating) if your creating a new package: 1. go to /packages 2. create a new folder with the name of your package 3. run npm init -y to create a new package.json 4. change the "name" field in the package.json to the name of your package

{
  "name": "@acme/my-package",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

{
  "name": "@acme/my-package",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

then in here create your files to your hearts content

4 replies

TTCTheo's Typesafe Cult

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

Shadcn components not working in nextjs 15 / react 19

I get the error from quite a few other shadcn components too, e.g Sidebar, Tooltip, Dialog, Drawer, etc

5 replies

TTCTheo's Typesafe Cult

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

Shadcn components not working in nextjs 15 / react 19

the button component:

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default:
          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
        outline:
          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-9 px-4 py-2",
        sm: "h-8 rounded-md px-3 text-xs",
        lg: "h-10 rounded-md px-8",
        icon: "h-9 w-9",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"

export { Button, buttonVariants }

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default:
          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
        outline:
          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-9 px-4 py-2",
        sm: "h-8 rounded-md px-3 text-xs",
        lg: "h-10 rounded-md px-8",
        icon: "h-9 w-9",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"

export { Button, buttonVariants }

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

5 replies

TTCTheo's Typesafe Cult

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

Use Zod schema after parse & transform as a new schema

Note: When using the .extend method even if you remove the field on the clientSchema it will still be there on the serverSchema

7 replies

TTCTheo's Typesafe Cult

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

Use Zod schema after parse & transform as a new schema

@Mugetsu So what i would recommend is the following:

// your default schema
const clientSchema = z.object({
  name: z.string(),
  bir: z.object({
      value: z.string(),
      label: z.string(),
  }).transform(val => val.value),
})

// your server schema which will extend the clientSchema
const serverSchema = clientSchema.extend({
  bir: z.string(), // overriding the bir field and keeping all other fields
})

// your default schema
const clientSchema = z.object({
  name: z.string(),
  bir: z.object({
      value: z.string(),
      label: z.string(),
  }).transform(val => val.value),
})

// your server schema which will extend the clientSchema
const serverSchema = clientSchema.extend({
  bir: z.string(), // overriding the bir field and keeping all other fields
})

What you could also do, is lets say we have many client fields that aren't all needed on the server e.g:

// your default schema
const clientSchema = z.object({
  uid: z.string().uuid(),
  name: z.string(),
  bir: z
    .object({
      value: z.string(),
      label: z.string(),
    })
    .transform((val) => val.value),
});

// your server schema which will extend the clientSchema
const serverSchema = clientSchema.omit({ uid: true }).extend({
  bir: z.string(), // overriding the bir field and keeping all other fields
});

// your default schema
const clientSchema = z.object({
  uid: z.string().uuid(),
  name: z.string(),
  bir: z
    .object({
      value: z.string(),
      label: z.string(),
    })
    .transform((val) => val.value),
});

// your server schema which will extend the clientSchema
const serverSchema = clientSchema.omit({ uid: true }).extend({
  bir: z.string(), // overriding the bir field and keeping all other fields
});

Or instead of omitting the value you could use the .pick method:

// your default schema
const clientSchema = z.object({
  uid: z.string().uuid(),
  name: z.string(),
  bir: z
    .object({
      value: z.string(),
      label: z.string(),
    })
    .transform((val) => val.value),
});

// your server schema which will extend the clientSchema
const serverSchema = clientSchema.pick({ name: true, bir: true }).extend({
  bir: z.string(), // overriding the bir field and keeping all other fields
});

// your default schema
const clientSchema = z.object({
  uid: z.string().uuid(),
  name: z.string(),
  bir: z
    .object({
      value: z.string(),
      label: z.string(),
    })
    .transform((val) => val.value),
});

// your server schema which will extend the clientSchema
const serverSchema = clientSchema.pick({ name: true, bir: true }).extend({
  bir: z.string(), // overriding the bir field and keeping all other fields
});

7 replies

TTCTheo's Typesafe Cult

•Created by Wezter on 8/31/2024 in #questions

Developing for multiple platforms.

If i were to be building a app with web + mobile i would be using something like react and react native with something like expo. i has seen teams use react native as a standised apporach to building web apps and just change the complier to use their custom components so for example a View might be a customised div element. I can't find the video but this is something that Twitter (X) did for their webapp for mobile devices. Expo has released support for building out web apps (https://docs.expo.dev/workflow/web/). I think the biggest benift to building the web app with react and a frame work than using something like react-native is that is essentally the same logic just changed so you can share code, functions and much more between the platforms in a mono repo

4 replies

TTCTheo's Typesafe Cult

•Created by Ankan on 9/1/2024 in #questions

need help in css

To build responsive websites i would recommend using an abstraction on css like tailwind to speed up the process and keep things nice and clean: https://tailwindcss.com/ If you want to use normal css than i would recommend doing something like this:

/* Base styles */
.nav {
  width: 500px;
  marigin: auto;
}

/* ...other styles */

/* Screen size 1 */
@media screen and (max-width: 650px) {
  .nav {
    width: 300px;
  }
  
  /* ...other styles */
}

/* Screen size 2 */
@media screen and (max-width: 650px) {
  .nav {
    width: 100%;
  }
  
  /* ...other styles */
}

/* Contuine with screen sizes */

/* Base styles */
.nav {
  width: 500px;
  marigin: auto;
}

/* ...other styles */

/* Screen size 1 */
@media screen and (max-width: 650px) {
  .nav {
    width: 300px;
  }
  
  /* ...other styles */
}

/* Screen size 2 */
@media screen and (max-width: 650px) {
  .nav {
    width: 100%;
  }
  
  /* ...other styles */
}

/* Contuine with screen sizes */

Alternatively you could use instead for element you know you want a certain size of the page to use percentages or calculated values based off the screen size e.g width: 50% or width: calc(100% - 30px);

3 replies

TTCTheo's Typesafe Cult

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

Use Zod schema after parse & transform as a new schema

So just going to add a clarifying question, you are using the schema:

const schema = z.object({
    name: z.string(),
    bir: z.object({
        value: z.string(),
        label: z.string(),
    }).transform(val => val.value),

})

const schema = z.object({
    name: z.string(),
    bir: z.object({
        value: z.string(),
        label: z.string(),
    }).transform(val => val.value),

})

for the client side form validation? and for example you would want the tRPC validation schema to look something like this?:

const schema = z.object({
    name: z.string(),
    bir: z.string()
})

const schema = z.object({
    name: z.string(),
    bir: z.string()
})

Is that correct or do i have it wrong?

7 replies

TTCTheo's Typesafe Cult

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

Failing to connect to local d1 db with drizzle

import { defineConfig } from "drizzle-kit";
import fs from "node:fs";
import path from "node:path";

function getLocalD1DB() {
  try {
    const basePath = path.resolve(".wrangler");
    const dbFile = fs
      .readdirSync(basePath, { encoding: "utf-8", recursive: true })
      .find((f) => f.endsWith(".sqlite"));

    if (!dbFile) {
      throw new Error(`.sqlite file not found in ${basePath}`);
    }

    const url = path.resolve(basePath, dbFile);
    console.log(`Using ${url}`);
    return `file:${url}`;
  } catch (err) {
    console.log(`Error  ${err}`);
  }
}

export default defineConfig({
  dialect: "sqlite",
  schema: "./app/server/db/schema.ts",
  out: "./drizzle",
  ...(process.env.NODE_ENV === "production"
    ? {
        driver: "d1-http",
        dbCredentials: {
          accountId: process.env.CLOUDFLARE_D1_ACCOUNT_ID,
          databaseId: process.env.DATABASE,
          token: process.env.CLOUDFLARE_D1_API_TOKEN,
        },
      }
    : {
        dbCredentials: {
          url: getLocalD1DB(),
        },
      }),
});

import { defineConfig } from "drizzle-kit";
import fs from "node:fs";
import path from "node:path";

function getLocalD1DB() {
  try {
    const basePath = path.resolve(".wrangler");
    const dbFile = fs
      .readdirSync(basePath, { encoding: "utf-8", recursive: true })
      .find((f) => f.endsWith(".sqlite"));

    if (!dbFile) {
      throw new Error(`.sqlite file not found in ${basePath}`);
    }

    const url = path.resolve(basePath, dbFile);
    console.log(`Using ${url}`);
    return `file:${url}`;
  } catch (err) {
    console.log(`Error  ${err}`);
  }
}

export default defineConfig({
  dialect: "sqlite",
  schema: "./app/server/db/schema.ts",
  out: "./drizzle",
  ...(process.env.NODE_ENV === "production"
    ? {
        driver: "d1-http",
        dbCredentials: {
          accountId: process.env.CLOUDFLARE_D1_ACCOUNT_ID,
          databaseId: process.env.DATABASE,
          token: process.env.CLOUDFLARE_D1_API_TOKEN,
        },
      }
    : {
        dbCredentials: {
          url: getLocalD1DB(),
        },
      }),
});

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`

Turns out the solution is to change the turbo config to include the envs

4 replies

TTCTheo's Typesafe Cult

•Created by Steven-sensei on 6/27/2024 in #questions

Shadcn Dialog + Form Error: React.Children.only

That's alright i have had the same issue before, and a bit confusing if you have fixed it else where by accident

5 replies

TTCTheo's Typesafe Cult

•Created by A Reptilian on 6/27/2024 in #questions

Most efficient monolith structure to have an Express.js REST API with Next.js SSR client?

Going off waht @Ovidius said you could run in a monrepo, turbo is the best choice for nextjs https://turbo.build/repo then you have all the code in the same code base and simply import the package in your nextjs repo if you want to for example share types. example mono repos: - https://github.com/midday-ai/midday - https://github.com/projectx-codehagen/Badget - https://github.com/Codehagen/Dingify - https://github.com/vercel/turbo/tree/main/examples

4 replies

TTCTheo's Typesafe Cult

•Created by Steven-sensei on 6/27/2024 in #questions

Shadcn Dialog + Form Error: React.Children.only

Formcontrol only expects 1 react element. Change your structure to something like this:

  <FormField
        control={form.control}
        name="name"
        render={({ field }) => (
          <FormItem>
            <FormLabel>Label</FormLabel>
            <FormControl>
              <Input {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />

  <FormField
        control={form.control}
        name="name"
        render={({ field }) => (
          <FormItem>
            <FormLabel>Label</FormLabel>
            <FormControl>
              <Input {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />

if you wanted to have what you already have just wrap it in a framgment:

  <FormField
        control={form.control}
        name="buyIn"
        render={({ field }) => (
          <FormControl>
            <>
              <FormLabel>Buy in</FormLabel>
              <Input {...field} className="rounded-2xl" type="number" />
            </>
            <FormMessage />
          </FormControl>
        )}
      />

  <FormField
        control={form.control}
        name="buyIn"
        render={({ field }) => (
          <FormControl>
            <>
              <FormLabel>Buy in</FormLabel>
              <Input {...field} className="rounded-2xl" type="number" />
            </>
            <FormMessage />
          </FormControl>
        )}
      />

Generally you can fix the error React.Children.only expected to receive a single React element child. by wrapping your items in a fragment (which adds no extra markup) or your could wrap in a simple div

5 replies

TTCTheo's Typesafe Cult

•Created by Huperniketes on 6/13/2024 in #questions

How do I map next.config.js code samples in the Next docs to T3's implementation?

Yeh defintly not the prettiest solution

7 replies

TTCTheo's Typesafe Cult

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

Connecting to websockets in app router

Yeh Cool thank you for your help

5 replies

TTCTheo's Typesafe Cult

•Created by Jasper on 6/14/2024 in #questions

Advice on realtime integration

All good

50 replies

Gaming

Programming