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

Uploading Word Documents (.docx/.docx)

I have been trying to upload .docx files using UploadThing. I used the following configuration: ``` bookUploader: f({ "application/msword": {...
Solution:
However, 5.2.0 is broken within the pages router, so if you're using the pages router, you'll have to use the 5.2.1 canary version, here: https://discord.com/channels/966627436387266600/1102510616326967306/1130159006292389898...

How to make extracting components in typescript less cumbersome?

So let's say for example I have a button styling that i'd like to use across most of my app. The recommended tailwind approach is to extract it to a component. However, doing this repeatedly can get quite cumbersome since I have to type every single prop. Is there anyway to infer or automatically create these prop types? I'm using webstorm and they have a extract to react component button, but it will just slap a :any on the props. Has anyone found a way to make the process of doing this more streamlined?...

Type error w/ Dates & shadcnui

Type error: Type '(event: Date | ChangeEvent<Element>) => void' is not assignable to type 'SelectSingleEventHandler'.
Types of parameters 'event' and 'day' are incompatible.
Type 'Date | undefined' is not assignable to type 'Date | ChangeEvent<Element>'.
Type 'undefined' is not assignable to type 'Date | ChangeEvent<Element>'.
Type error: Type '(event: Date | ChangeEvent<Element>) => void' is not assignable to type 'SelectSingleEventHandler'.
Types of parameters 'event' and 'day' are incompatible.
Type 'Date | undefined' is not assignable to type 'Date | ChangeEvent<Element>'.
Type 'undefined' is not assignable to type 'Date | ChangeEvent<Element>'.
...
Solution:
fixed, just had to switch from onSelect={field.onChange} to onSelect={field.onChange as unknown as SelectSingleEventHandler | undefined} and the build ran

Loading state when quering profile data

Hi people! Started with T3 stack and working on the profile page right now. I am trying to get the current logged in profile data and I am using a protected route/api for that. However, how can I make sure the 404 page is not shown when the data is not fully loaded yet? ``` const Profile: NextPage = ({}) => { const { data: profile } = api.user.me.useQuery();...

Scoping tailwind styles

I am building some components, which should be safely pluggable into shopify theme. First thought - I should use shadow DOM to scope styles to the component (since I don't know what potentially could be inside the shopify theme). Of course I want to use tailwind, but it seems like it's not quite fitting. Anyone faced such a challenge? Haven't found any so called "right" solutions for the problem.

tRPC Client-side Type Inference Issue with Nested Promises

Hello everyone, I'm using tRPC for my TypeScript project and I've encountered an issue regarding type inference on the client-side. Here's the simplified code snippet from my server-side: ...

Apple Auth Error: Unacceptable audience in id_token

Using create-t3-turbo with supabase (https://github.com/supabase-community/create-t3-turbo). I'm trying to get my Apple login working. I've already created an apple dev account and put in the bundle id in supabase auth apple provider config. Whenever I try to log in using apple login button though (through expo go using pnpm -F expo dev), it errors out giving the error in the title. I've also put in the bundle id in my apps/expo/app.config.ts. Not sure what else I'm missing. ```json { "error": {...

Layered architecture decision

if i have 2 api items and invoice: the invoice api will reduce the items quantity is it better to make it on -make decrease quantity from items repo and import it to invoice service layer -same but import to invoice repo layer...

Error Handling through API

Hey peeps, i am building an App with the t3 stack, so far one of the best experiences i've had, was mainly a react native / Expo dev 2 years prior. This is my first exposure to backend development too. The toolchain chosen in t3 makes it easy to get started. ...

Next-auth error handling on oauth problems

Hi, I have this oAuth custom sign-in page, and I have huge problems with figuring out why I can't access the errors returned from sign-in with a provider... ```tsx import { getProviders, signIn } from 'next-auth/react'...

Build errors in dev server

I'm using T3 app and I love it so far, however there's this one thing that is quite annoying and that is the dev server compiling even when there should be build errors. That includes eslint errors and typeerrors. The dev server compiles successfully even when it really shouldn't (especially when there's type errors), I think all is fine and then I get hit with a runtime error when visiting the affected page. next build catches the errors (both eslint and type) successfully. I would like to get the error shown in console and for the app to not compile even during next dev How could I achieve that?...

The keyword 'import' is reserved

Hi, so I thought adding a pre commit hook with husky might be a good idea for eslint. However after running npm run lint I am getting The keyword 'import' is reserved error. I have searched online here https://stackoverflow.com/questions/36002226/parsing-error-the-keyword-import-is-reserved-sublimelinter-contrib-eslint and have tried to and have tried to add add this screenshots code to _eslintrc.cjs but I am still running into the same error, I also tried removing comments in that file, still same error. Anyone know what might be the issue, thanks....

python and t3 stack

Hey all, I am new to the t3 stack. If I want to create an api route that runs a python script. What's the best approach? Is it deploying a flask?
Solution:
I'd probably just deploy a lambda with your python code and call it like you would a normal http endpoint, there isn't a super clean path for this type of integration with t3

TRPC functions vercel deploy

https://github.com/c-ehrlich/you-dont-need-callers/blob/main/src/server/api/example1-one-file/product.ts im doing this why does it seem like prisma does not work at all in the functions when i deploy to vercel. locally it works but when i deploy to vercel im not seeing console.log. it runs the function it just doesnt use prisma right ``` import { PrismaClient } from "@prisma/client"; import { env } from "@/env.mjs";...

tRPC clerk auth context not working on Server side HTTP requests with NextJS app dir

I have setup tRPC as per the https://github.com/trpc/examples-next-app-dir/ but the server side http request do not have the auth context that I am passing in through clerk's getAuth()... I have done a bit of investigating and found the req I am passing to the getAuth does not have cookies in it but when I use client side http req it works as intended. I am wondering if this is intended behaviour or if its me setting things up wrong. My tRPC Context ```ts import { getAuth } from '@clerk/nextjs/server';...

Thoughts on Million.js?

I am considering how to move forward with the web version of my application. I am currently using react native for the mobile version of the app, and the web version is just very janky because the app is only developed for web right now. The switch to web will require big changes in UI, and the entire UX could change due to the nature of phones or an IPAD vs a keyboard and mouse and a larger screen. So I thought it might be good just to build a new app using react.js instead of react native, re-...

t3 turbo firebase functions

So I converted my t3 app to t3 turbo using this https://github.com/t3-oss/create-t3-turbo as my base. Everything is working great. Now I'm trying to add firsbase functions. via the fire base cli firebase init functions. But after i install and run the basic command "serve": "pnpm run build && firebase emulators:start --only functions", I get about 63 errors that say something like this ../../node_modules/@types/react-native/globals.d.ts:337:15 - error TS2300: Duplicate identifier 'URLSearchParams'. which isn't being used. ...
Solution:

Old Imac i want to turn into monitor but its not working

I have an old broken imac but the display is fine i want to turn it into a second monitor but for some reason its not working idk why im using a display port cable to connect to an imac that transits to an hdmi connected to my pc pls help

How to remove default/example stuff

So I'm wondering what stuff I should be removing to have a bit more of a barebones t3 app. I've installed everything because previously I was using regular react and piecing together other packages, but now I'm just trying to have it like an all in one kind of thing I guess? However there is just a lot of boilerplate code and I'm not sure what are the core files I should be keeping, and what I can remove because it's just example files. Thanks for the help...

fetch failed with app directory

Hey guys, I'm kind of stuck with drizzle at my first try using the app directory. I have defined the following db query in my page.tsx: ```tsx export default async function Home() {...
Solution:
Yes! I found the issue. It was, that somehow the creator of my repository, that I used as template, used @planetscale/database, but I was not using planetscale for my dev environment and so it did not work. This now also makes sense with the port 443, which was actually the tried connection to the database url (which was 127.0.0.1 at this moment) and so it did not find any database, because there was none. Now I've changed to drizzle-orm/mysql2 and I will use @planetscale/database in production...