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

Zod not validating file input

``` z.object({ userId: z.string(), headerImage: z .instanceof(File)...

Cannot upload files to supabase storage

I want to upload image to supabase storage from trpc but im getting Unauthorized error even though ive created policy for anon users (as im using next auth) ``` changeUserHeader: protectedProcedure .input(...
No description

Why does the Next.js app need `AUTH_REDIRECT_PROXY_URL` in `create-t3-turbo`?

In searching the codebase, it doesn't seem to be used on the Next.js side.
Solution:
Never mind, I see that it is a built-in environment variable in Auth.js: https://authjs.dev/getting-started/deployment#auth_redirect_proxy_url

Create an embedded widget out of react component used in Next.js project

I've built an application in Next.js with some components that need to run as "widgets" or "web components" on third-party websites. These components are also used in my application for demo purposes. It would be ideal to use the same components to create widgets without rewriting external libraries like react-hot-toast. I managed to solve this by using Webpack to bundle the component along with all its dependencies (sub-components, Tailwind CSS, etc.), including React and ReactDOM, so that the client can run the components. However, I'm wondering if there's a simpler way to achieve this....

Routing Assistance

I am trying really hard to try and understand the Routing thing with NextJS and I just can't wrap my head around it. Right now, I'm just trying to scaffold out my site with generic stuff and get routing setup, but I just can't figure it out. The site when loaded at / should be the same as if a person goes to /spells (1st screenshot) Right now, if I go to /spells I see the 2nd screenshot. The content of /spells should be loading where the cards are (which is currently in (main)/_components/content/content.tsx. The same would go for if someone browses to /suggestedGear and /maskedCarnivale. The area with the cards replaced appropriately. The 3rd screenshot is my current directory structure (which is probably the problem). ...
Solution:
App dir is fun, until you make things overly complex 😛
No description

any unofficial WhatsApp ApI

WhatsApp api that doesn't open the chat to see if a new message is arrived or not

Trying to find video where Theo wraps third party library in a type safe way?

Was trying to find that video where Theo explains how he wrapped Upstash or somethign similar, i can't remember where it is?? I wana build some kind of setup where i can publish upstash messages and have it be validated and call the correct function in my route handler, any ideas where i can find that vid or better yet a link to repo or something much love!...

Next.js with Socket.io server

I am trying to setup a socket.io server with the next.js app, I have bootstrapped the creation of the app using create-t3-app, I have found this official guide https://socket.io/how-to/use-with-nextjs but I am having a typescript issue in this part const httpServer = createServer(handler); telling me Promise returned in function argument where a void return was expected....

FatalError: error TS6053: File '@acme/tsconfig/base.json' not found.

is anyone else encountering issues with the create-t3-turbo? It looks like Vercel has switched to using turbo 2.x, and it's causing problems with my old setup (which I forked 6 months ago). Most of it works fine, but I'm getting a FatalError: error TS6053: File @acme/tsconfig/base.json' not found. on the Vercel CI.

DrizzleOrm querying error

When I run getUserByUsername I am getting undefined for some reason, even though both of these functions are querying the same way, but with different columns. Does somebody know what may be causing this?...
No description

Help with global state

I've fallen down one too many rabbit holes and could use some help. I have a number of toggle buttons on my website, and I need to know which are selected. I need to know this selection data on a few of my components, so I am trying to find a way to save this state. I've tried making a context, but none of the examples I could find compile. I tried sessionStorage which would save the old state on reload, which duplicated values. Still pretty new with nextjs/react/typescript....

You must define a transformer on your your `initTRPC`-object first

My pretty stock t3 app is screaming at me, (next pages router, trpc, prisma)... Anyone have any ideas, hopefully im just being stupid. One thing i did change (but cant see how it would affect this) was post generation, change the database to be postgres from mysql. Including some env vars from vercel too. Given that it was generated from ct3a, i believe that the version i am on is the trpc 11 release candidate...
Solution:
I found the answer I believe, this issue occurred after i was messing around in tsconfig and turned off strict mode. Turn strict mode on and it may solve this like it did for me.
No description

unsafe assignment of an `any` value

I am needing to pull in a value from my package.json file (the version of the application) and with t3 I am thrown the following error (see screenshot). This is being thrown in my next.config.js file which has the following code: ``js /** * Run build or dev with SKIP_ENV_VALIDATION` to skip env validation. This is especially useful...
Solution:
yeah, i can. need to commit the changes
No description

A project for both NEW and SEASONED devs

If anyone knows: - Brand new dev with 0 experience who want good experience on a collaborative project - Seasoned developers looking to help out brand new developers ...
No description

Hi, First Post, Sharing a pattern I've found for RSC to ClientSide state

Hi, anyone else stumble upon this pattern for having the server state initially available when a Client Component loads, and then overwriting it with reactivity latter? I use $state with $ to denote $erver State, to keep it visually separate from client states. Seems like I have been able to have the best of both worlds with this method, no rerender flicker nor skeleton loader needed. ...

nextjs api route request.query is undefined

```ts export async function GET( req: NextApiRequest, res: NextApiResponse<GoogleOAuthCodeExchangeApiResponse> ) {...
Solution:
If you're using the App Router, the req type is NextRequest, or even just simply Request. query doesn't exist on the requests from App Router.

Next js build success locally, but throws errors on vercel

I'm not using useContext, nor useSearchParams nor have modified the error pages.
Solution:
in local, if you run next buidl, the NODE_ENV is not set to production, thats why i was not seeing the erros

React Native Security Question (.env)

Building an app using Expo + Supabase. During the set up I created some envs. Everything works, but what happens to the environment variables? Can an attacker access them from the mobile app?...

Creating this layout in Nextjs with RSC with URL state

I am trying to create this layout in Next JS, i'd like to use the server components while making it snapy between changes, i've checked out parallel routes in nextjs, but trying that out, there is a delay when user clicks on the button and sidebar appearing cuz of route change
Solution:
you can do something like this:
/[id]/[color]/
/[id]/[color]/
you create two layouts, one for /[id] and another for /[color] ...
No description

What would you use for a global state management? - Initalization from API needed

Hello, So long story short, I would like to have a global state management for my advertisements and want to display in multiple components(maybe even in the sidebar). This ads can have dynamic styling(like row-span-2, col-span-2 in a grid case). The initial advertisements should come from server so the initialization need to be a fetch call (or something else). What do you guys would recommand? My approach with Zustand failed(I'm still trying). This state should have a nextAdId too, which represents which ad should be rendered next. Thanks...
Solution:
I think this logic would ideally not be in a frontend at all. Basically you'd have endpoints like getSidebarAds, getSliderAds, and for the grid that's dynamic, it'd be something like getContent which would return an array of objects with type: "item" | "ad". You could then use this array to render either BusinessCard or Advertisement. And if you can handle it on BE, you can just look at all the available ads, and ensure these endpoints don't return duplicates....