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

Include padding bottom when overflow-y-scroll

I have an element that needs to be scrollable. Specifically, this element is the parent element that encapsulates all elements bar my sidebar (im using nextjs, this element is element that encapsulates children in the root layout). I would like that when the element is scrolled, that the bottom padding is also included in the scroll, e.g if we were to scroll all the way down the page, the bottom padding on the element should be visible. Currently, when we scroll all the way down the element, the page cuts off before the bottom padding is displayed. (In the image attached, I have scroll the page all the way down) RootLayout:...

Cannot get data out of Promis.allSettled()

I am trying to get data from db which requires a an array of individual queries like this: ``` const dbColumns = await ctx.db .select() .from(columns)...

Whats /aab

Lately I've seen a lot of request in my server log probing for some obvious securit overgishts like GET [host]/.env or GET [host]/wp-admin/setup-config.php but there are some I don't recongnize what they are going for e.g. GET [host]/aab8 GET [host]/aab9``GET [host]/ab2h anyone know if they mean anything ? if so what, just curious...

Vercel Data Cache Debugging

I there an way to see what fetch requests hit the Data Cache? I have an fetch which should be opted out of but since I'm using a library I can't access the fetch directly. It's suppsed to be able to take fetch options but I've not found a way to verify if this is actually working. The closest I've found is the number of reads for the project, but nothing on individual fetches. I've read the docs on Disabling the Data Cache, but they don't include any mention any tools or methods for actually checking what's in the cache....
No description

quick Graphite.dev question about existing commits

I'm try out graphite atm and i have an existing feature branch, main -> A with some well organized commits A.1, A.2, A.3, A.4 ...

Patching Next Dev Server

I want to patch next.js dev server to get component tree on server (e.g. list all client components or draw tree in of all components exist on the server vs on the client) At first i tried to step into .render function of NextServer using WebStorm debugger, but it does not now where to jump therefore just skips the app.render call. After this I've downloaded the next source code (from https://github.com/vercel/next.js). After reading a lot of source code i found Server.renderToResponseWithComponentsImpl(...), which is 1300 lines long function, purpose of which I cannot really understand, and renderToHTMLOrFlightImpl (which is part of app-render.tsx module), magic of which is even less clear. Maybe there are some resources like articles or docs on next.js internals that can be helpful? Or maybe my approach is wrong and I whould try to do this in a different way?...

Database seeding with latest T3 Stack (/w Drizzle) and Faker

Hello! I've been now working a project based on latest Theo's The Modern React Tutorial (https://www.youtube.com/watch?v=d5x0JCZbAJs) Project that I'm working requires migration from existing system to new one, after it is ready. And before that I would like to use a lot of seeded data in database, for testing UI/UX and other functionalities. ...

Running into Error: @clerk/nextjs: Missing publishableKey. when following the The Modern React Tutor

Anyone else run into this error when deploying to Vercel? - Clerk is working fine on localhost - NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY added to vercel Environment Variables ...
Solution:
Looks like it's a Vercel incident: [Vercel status] Investigating: New environment variable not appearing in production deployments https://stspg.io/2jnk8gcxtllr...

File is uploaded but getting CORS

Hi everyone, I have next.js app and an endpoint to the laravel backend where I have to upload form data with file I'm getting cors error even though status is 201 and file is uploaded on the backend side, my axios is throwing error so i can't display proper message...

Security: How to genuinely not allow HTML?

How do you guys do it? I can create a FileRouter and not include blob or text as file types ```typescript const f = createUploadthing();...

Vite config ts cannot import `resolve`

hey guys. How can I import resolve from path in vite.config.ts?...

How should I scale my fetch-heavy React/Next.js app?

I have a Next.js app that fetches and processes lots of data for an hour or two every few hours. This spikes the CPU on my Vultr 2-vCPU "high frequency" VPS. The problem is all that fetching from the cron tasks significantly slows down the frontend because of the CPU-spiking. So what is the best way to scale this? I'm considering: 1. Refactor my code so the cron-scheduled fetching happens on a different server, but then I have to create extra API endpoints on both sides for triggering the refreshes and clearing caches....

Weird rendering bugs on mobile. Is it NextJS or my CSS skills?

I'm developing an app. It works correctly on the web (pc), but when testing it on my smartphone I get some rendering artifacts, like a ghosting. See attached video. Never seen anything like that before. I found no pattern to replicate it. It usually appears when changing pages. Is this a problem with my CSS, my phone or with the NextJS?...

Clerk thing showing error following theo's react tutorial video

This is the error I get which was earlier working just fine, I tried to make another app and same error, kinda sad.
No description

(solved) How to eslint the whole project in VS Code?

VS code highlights open files using the eslint config, but how do I lint the whole project? (i.e. also file I don't currently have open)

how to use argon2 on vercel

There seems to be a persistent error when trying to use Argon2 on vercel. The project doesn’t deploy. Has anyone been able to get this working? The only way I made it work was running node 14 but that will be deprecated soon

'use client' with tRPC? Type error: This expression is not callable

From boiler npx create-t3-app@latest using the app router: On simple tRPC file src/server/api/routers/test.ts: ```ts export const dataRouter = createTRPCRouter({...
Solution:
api.test.getCountryList.query()

uploadthing server SDK inside tRPC route (monorepo)

Hello everyone 🙂 I'm using the "create-t3-turbo" template and uploadthing, everything works well BUUUUUUUT... I trigger sometimes from the tRPC api route the uploadthing SDK (UTApi)...

Manually trigger upload instead of automatically uploaded

Hi, im trying to migrate from edgestore to uploadthing i find my self struggling to match my use cases with the UploadButton from uploadthing/react since the components upload it's file automatically. is there a way to disable that behaviour or i need to create my own upload component?...

My callback is failing for larger files

Hi! I'm working with PDFs and I'm doing some stress testing with bigger files. Behind the scenes I'm embedded and indexing the pdfs in an Upstash db, and originally that was the culprit due to the exceeded limit of the metadata text size, though that was quickly resolved....