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

Type Errors when importing AppRouter from npm workspace TRPC server

I'm setting up a mono repo using npm workspaces where I have an api directory which has a trpc directory. When I import the AppRouter from my package, I get cryptic type error I can not understand, BUT when I copy the files directly into my next project, the type error goes away. So I think I'm exporting the correct AppRouter, but typescript is confused for some reason. Any ideas what might be going on?

Issues with 'pnpm install' using t3-turbo-and-clerk

I'm not sure if many people are using the 't3-turbo-and-clerk' template, but I'm having an issue where pnpm has very inconsistent and erroneous package installs. When I first cloned the repo, it was working correctly, but now when I run pnpm install it will install all packages to the root level node_modules. If I use a different version of pnpm it might install node_modules in the apps/packages, but it's an incorrect and incomplete installation. I've been stuck trying all kinds of things for a day now. I delete the pnpm-lock file and do a 'clean' before installing each time, but with no luck. Even pnpm clean only cleans the root level node_modules... I haven't touched pnpm-workspace.yaml or any config files, so I'm leaning on it being a PNPM issue, but I have no clue right now. Anyone have any thoughts? screenshot is an example of the incorrect installion I was talking about... in my apps/nextjs folder, this is what it installed for node_modules....

Iterate over an array and create a new sorted object.

I'm completely brain farting. I have data coming in like ```typescript...

`getServerSideProps` fails silently and returns 404

I’m currently tinkering with something and noticed that when an exception is thrown in getServerSideProps, the page just returns a 404 with nothing logged in either console. Is there a way to make it not fail silently and log the error? (I’ve tried putting it in a try catch block)

createProxyHelpers typing

hello all, in the project setup we get the context options and createContext function, I am wondering how to properly pass properties to be able to use getServerSideProps, I thought I could pass the req, res, but then It complains about missing cookies, is there something I am missing?

Slow cold start times in Vercel with my T3 App API

I'm trying to debug some really bad cold start times with my web app's api. The UI loads up really quickly and I haven't had a problem with it. However, my trpc api sometimes takes a full 10 seconds to return a response. My api performs fairly simple CRUD operations against a cloud firestore backend. I'm not really sure how to debug this. I got the webpack analyzer working and the results are... confusing: ```...

Is there any guide or tips for migrating a Blitzjs app?

Hey there 👋 I have a PWA Blitz.js app that would like to migrate to the t3 stack. I would like to know if someone else has done it before and if they have some tips, here are some random questions that pop my mind: Where should I start? ...

How to use getInitialProps within _app.tsx?

I'm trying to get the current color-scheme which is saved in a cookie into the app page. Is there a simple way to do that? I already tried different solutions, which did not work. Currently I have the following: ```tsx App.getInitialProps = async ({ ctx }: { ctx: GetServerSidePropsContext }) => ({...

Options of Video Chat APIs to use inside my NextJS app

Hey, I'm building an app which I want to include video chat, I don't think its very feasible to build and host my own video chat API (at least for the time being), anyone have any recommendations of Video Chat APIs, I would prefer consistency/reliability over video quality.

Zod - how to define schema for number that can be one of few values

How can I define a schema that would accept a number which would be one of these values 10,25,50,100

react-hook-form with formatted numeric values

I have an "amount" field which is numeric in my react-hook-form. Since the amounts can grow up to the millions in my case, I want to format the displayed value having a thousand separator for better UX. I looked for libs for formatting these values, and the best (maintained, easy to use, high popularity) I could find was react-number-format, so I gave it a shot. I found some attempts, all telling I might need to make my input "uncontrolled"....

How well can I rely on Tailwinds ability to know what classes to include in the CSS?

I'm new to Tailwind and I'm trying to understand how it works under the hood. More specifically how well can I rely on its "engine" to find all references to Tailwind classes in my source code to know which classes to include in the CSS that it generates? For example, will Tailwind work (include the correct classes in the generated CSS) in the following scenario?...

tips on getting file sizes down in a nextjs 13 project?

things are getting preeeeetttyyyyy heftyyyy in my big project ```json // package.json "dependencies": {...

What's everyone using for implementing google sso?

We have a vite app where we manage user sessions in a django backend - need to replace react-google-login. Open to suggestions!

What is an effective way to proxy your backend API? (NextJS)

Currently all my queries go through the client server which calls my backend API. It seems a bit ineffective and not enjoyable to do (code duplication / manual route work) The goal is for that extra security and external backend API obscurity. (DDOS attacks, etc)...

Next Font showing ts errors

my next font is showing typescript errors, it seems to be used how they do it in the docs. Any ideas?

wrapping a generic function in typescript

i'm trying to write a wrapper to automatically handle loading state when necessary. my idea is to wrap my function definitions in this function busyable which then returns a function that precedes and succeeds the callback passed in by toggling busy state. something like this: ```ts const busyable = (fn: (...args: any) => Promise<void>) => { return async (...args: any) => { busy = true; await fn(...args);...

is it problem to install next-auth by hand?

while I was installing t3-app i didnt have in my mind to use next-auth and then realized i have to use it now so will it be problem to install it by hand? I am asking that because when I created api directory and tried to make GET request I get page not found

Docker & Nginx - ports

Hi, I am running Docker containers on my VPS and I'd like to deploy there an API with Nginx config. Nginx uses by default ports 80 and 443, but those ports are already taken by Nginx which is running in non docker environment. Can I run another nginx (in docker) on this VPS if those ports are taken?...