Theo's Typesafe Cult

TTC

Theo's Typesafe Cult

Join the community to ask questions about Theo's Typesafe Cult and get answers from other members.

Join

Using Mantine instead of Tailwind gives useInsertionEffect Error

I created a new T3 App, I selected only tRPC, Prisma & NextAuth. I installed Mantine afterwards. I'm using Mantine Ring Progress and some other Components. But it is giving me error - error - useInsertionEffect only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/react-client-hook-in-server-component while runing npm run dev or npm run build && npm run start I'm not using the app directory. I asked the creator of Mantine, and I've used Mantine Default Template of Next.js, Everything was working as expected in that Template. Link: https://github.com/mantinedev/mantine-next-template Thanks...

Vercel responding with 503 (An error occurred with your deployment FUNCTION_INVOCATION_TIMEOUT)

I have created simple nextjs app using create t3 app. it has simple one router that returns a list of products. database is mongodb. It is working locally getting response from trpc router. but when i check my live vercel app it is returnnng 503 error. i have also integrate MongoDB Atlas to my vercel app....

Property 'authorId' does not exist on type 'Post[]'.

Coding along with the tutorial, and I came across this error I cant resolve. Portion in the video: 47:33 Code thus far: ```typescript...

Why .cjs?!

One quick question, is there a specific reason why t3 uses .cjs files? ( For tailwind and postcss )

t3 video tutorial typescript error

I am following along with the official t3 stack video tutorial here. At ~24 min, there is a typescript error in TRPC, and Theo restarts the server, which fixes the problem. I am getting the same problem, but restarting the server doesn't fix the problem. Any ideas? ```typescript import { z } from "zod"; ...

`import` and `require` in the same file?

I'm trying to use https://github.com/luin/ioredis and https://github.com/rse/tika-server/tree/master in the same project. When trying to build a Docker image out of the project, I can't seem to get it working as ioredis needs to be imported and tika-server required. What is that interaction about? Any clues how to get this working or what I may have set up wrong?

How to send ReadableStream through trpc

I’m using OpenAIs API and they have the option to send ReadableStream to send chunks of data by enabling the stream option. We all know that TRPC can only pass json from backend to frontend. Just wondering if it’s possible to pass a ReadableStream? Is it serializable?...

How to override and update session callback's session object after signIn callback?

The thing that I want to do is to get the user data with token from the server and put it on the session.

Am I using useState incorrectly here?

For context I am attempting to to set up multipart uploads to S3, and yes I did see https://github.com/nramkissoon/t3-s3 and my code is based on that. I have these two useState: ```ts const [uploadId, setUploadId] = useState<string[]>([]);...

Best practice for Tailwind class merging? twMerge?

Do you guys use twMerge or similar? I tried using it but it seems to break something within the stack - I have been using it before though with NextJS standalone, so not sure where the problem is: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports....

Server Side Redirect based on tRPC/Prisma query

How can I redirect before page load based on a tRPC/Prisma query? I have a table which I need to check against, before I can decide whether to redirect or not. Sorry if the question might be stupid - bit of a tRPC/Prisma newbie here. Thanks!

vscode power hungry

So, to decide not to open vscode, which is actually my daily routine, i use vscode daily Then i opened my battery performance, which was around 5 hours + despite heavy browsing on Chrome and doing other things But if i were to use vscode i get around 2 hours...

How to automatically add type prefix to type imports?

Hi all, is there a way to automatically add the type prefix for type imports in vscode? Either on auto-import or with prettier/eslint formmating. I like the rule and don't want to remove it, it's just a bit annoying to have to manually add 'type' on each type import....

is they a size limit or any issue with send base64 images from front-end to trpc backend endpoint?

So basically i am trying to do a little user verification and platform i am plugged in uses data:image/jpeg;base64 format as acceptable image format so just wondering if trpc can handle it and if they is a size restriction attached?

Rendering function vs variable assignment

Hey everyone, I'm wondering if anyone knows whether there's a difference between having a rendering function and variable assignment. To have a better understanding of problem imagine a scenario where depending on some value You need to render an icon. You create a map where keys are the values and keys' values are icons. This can be done in two ways. First with variable assignment: ``` const map: Record<string, ReactNode> = { success: <SuccessIcon />...

next auth with planetscale?

currently following https://www.youtube.com/watch?v=YkOSUVzOAA4 , but when i add relationMode = "prisma". it tells me
With `relationMode = "prisma"`, no foreign keys are used, so relation fields will not benefit from the index usually created by the relational database under the hood. This can lead to poor performance when querying these fields. We recommend adding an index manually. Learn more at https://pris.ly/d/relation-mode-prisma-indexes"
With `relationMode = "prisma"`, no foreign keys are used, so relation fields will not benefit from the index usually created by the relational database under the hood. This can lead to poor performance when querying these fields. We recommend adding an index manually. Learn more at https://pris.ly/d/relation-mode-prisma-indexes"
for the models necessary for next auth, so...

Why use Turborepo over Nx

In general or/and for Next.js specifically. I've seen Theo talk about Turbo but when I tried it, it was painful because of all the ESLint errors in the default repo it created. Nx is way richer in tools and benchmarks show that it's faster than Turbo, although I'm not sure if that's still the case. What benefits Turbo has other than being simpler for smaller projects?

when to use tRPC vs a nextjs api route

ive really started to appreciate the tRPC-prisma data flow to my frontend, but im coming from a nextjs-not-typescript background. ive been using api routes there forever, and i still see it in the ct3a directory. but when do i use it then?

Strange Runtime Error

Hey guys, it's the first time for me using the T3 stack i'm trying to create a note-crud just to test with the stack but this error has left me stuck on it for a while. ps : sorry for my english and I'm a french speaker from Belgium