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

File Upload To AI Service

I’m building a next JS app written in JavaScript (I know, I know, I’m still learning). I want to know if Uploadthing will suit my use case. I need to allow users to upload audio files (greater than the 4.5mb limit of Vercel) which will then be passed to an AI service for transcription. Can I use upload thing in a purely JavaScript project?...

TypeError: Unknown file extension ".ts"

I've started a fresh T3-stack project and got this error when trying to run ts-node on any .ts file. err: ```bash TypeError: Unknown file extension ".ts" for test.ts at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:176:9)...
Solution:
AFAIK, it's ESM-related. I've just switched to tsx to avoid dealing with this

Uploadthing Unauthorized Error

UploadThing stopped working on my website. Initially got 500 Internal Server Error (couldn't reach https://uploadthing.com/api/prepareUpload). Generated new API keys, still same error. Deleted project, created new one, now getting 401 Unauthorized. Added new API keys to .env, followed docs, still not working. Same behavior in both production and localhost. Core issues: 1. Can't reach UploadThing API 2. Unauthorized errors despite correct setup...
No description

Should the server respond with the error or a generic "try again" message?

If a user makes an API request to the backend and the request fails because the database had an issue, should the server reply with the error that was thrown or should the server reply with a generic "Something went wrong" message? I'm leaning towards the generic error messages because showing the error that was thrown could allow an attacker to infer what database your using, and usually, you want to hide as much information about your backend from an attacker. But showing the actual error message would allow users to report bugs and show the developers the actual error message. ...

indecipherable build error

when building my nextjs app i get the error ``` Creating an optimized production build ... Failed to compile. ./node_modules/.pnpm/@[email protected]/node_modules/@aws-sdk/middleware-sdk-s3/dist-es/s3-express/functions/s3ExpressHttpSigningMiddleware.js + 38 modules Cannot get final name for export 'NO_RETRY_INCREMENT' of ./node_modules/.pnpm/@[email protected]/node_modules/@smithy/util-retry/dist-es/index.js...

Best way to do form?

What is the best packages for doing forms cleanly and easily with clientside validation? nextjs

NextJS routing

Anyone using NextJS ? I have a homepage that displays a grid. When I click on a cell, I want a popup to appear at the center of my screen. I also want my URL to change and add query parameters with the id of the cell, so that when users share that URL, the new user will have the popup displayed automatically without clicking. I know that NextJS has its own system of routing based on pages organized in folders. But in my case, it's more like a traditional SPA. Does NextJS have any native routing system to handle that case too ? Or I should npm install React router ?...

Update locale or query param doesn't trigger the loading.tsx file with useSuspenseQuery

So i've these two suspense query which are also prefetched in the page.tsx, but when changing the currency or locale, the loading state is not triggered but rather its updated in place. Any way to trigger the loading.tsx file? PS: Used <HydrateClient as well...
No description

I am getting error in eslint. I tried searching for solutions but couldn't find any. Can anyone help

80.57 Linting and checking validity of types ... 115.9 Failed to compile. 115.9 115.9 .eslintrc.cjs:8:13 115.9 Type error: Type 'string' has no properties in common with type 'Plugin'....

I'm trying and failing to set up iron-session + trpc in a T3 app. Anybody here ever do that?

I've been admiring T3 from afar and finally got a good reason to spin one up. NextAuth with all its convenience is fun, but not exactly fitting my needs for authentication and session management. Been trying to switch gears and use iron-session + my own DB solution, but I'm getting hung up on trying to integrate that into the trpc context as well as pass headers around to get access to the cookie ID to load. Found a pretty good github example of that (git::parkgang/trpc-iron-session), but it's using nextJS directly and including @trpc/next in the flow, which is not baked into T3 app... and trying to move to it is making TS lose its mind (or maybe me). Any ideas?...

Discord login page for T3 stack app not working on Firebase App Hosting

I'm having issues getting the Discord login page working on Firebase App Hosting (https://firebase.google.com/docs/app-hosting). I was able to get Firebase App Hosting to recognize my T3 app from GitHub and it used it for a build. I did have to creating an apphosting.yaml file with contents similar to what I have in my .env - and I also created some Google Cloud Secrets Manager secrets. It deployed fine and the web page did come up. I also added the app URL appended with /api/auth/callback/discord to the Discord OAuth2 redirect URL list like I did originally with the localhost:3000 URL. However, when I click on the Sign In button, then click on the Sign in with Discord button, nothing happens in the browser. The F12 console doesn't show any network errors. The App Hosting Cloud Run logs don't show any errors either. What am I doing wrong or missing? I know the T3 app is really meant to work with Vercel, but I was hoping to get this working on Firebase App Hosting. FYI, I deployed the t3 app to Vercel with no issues. I also added the Vercel app URL appended with /api/auth/callback/discord to the Discord OAuth2 redirect URL list. And when I click on the Sign in button then click on the Sign in with Discord button, it does take me to the Discord login page. So there's something different required with the Firebase App Hosting setup. I tried looking for info on this, but couldn't find anything. Or do I have to use Firebase auth instead?...

Supermaven vs Copilot

Why is Theo back to using copilot after recommending supermaven a couple of months ago?

React Error

'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.ts(2686)
'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.ts(2686)
I am getting this error in an extremely simple page (using pages router)...
Solution:
Solved it, I guess typescript was just being stupid with that file (I had to delete it and recreate it for anyone who runs into this issue).

Need help in TipTap

Need Help I am building a Notion-like text editor using TipTap (React). This editor is designed for both creating and updating content. One of the key requirements is to allow text and images to be flexibly positioned—images on the left with text on the right, and vice versa—with the option to create multiple columns. I've attempted to solve this problem multiple times, but I can't seem to find a solution. The official documentation doesn't appear to cover creating columns: https://tiptap.dev/docs....
No description

building content heavy SEO-compatible websites

Been wondering about the way I should go for these projects, should I use something like wordpress or continue with nextJS and sanity.io? Recently I've gotten a new client recently and they want me to build a website like https://scafwest.com.au/projects, which will obv need some content editing and a cms...

clerk auth default metadata

hello, to start this of some basic info: i am currently working on a learning project which is a sass using react, next.js and clerk auth with the t3 stack i currently am implementing a sort of token system (and basic role system but thats not very important) utilizing clerks user metadata feature for that as i currently am not using a stand alone db. i was wondering is there was a simple way to add default metadata when a user is created for example when a user is created the start with 100 tokens? ...
Solution:
after some messing around came up with a much simpler solution to use at least for the time being basically when retrieving the tokens in the navbar if it returns as undefined i run a nonblocking function to create the metadata and temporarily show the default amount ```export async function GetTokenAmount(userId: string) { const user = await clerkClient().users.getUser(userId); const data = user.privateMetadata; const tokenAmount = data.tokens as number; ...

Next.js Use localStorage For Rendering Without Flash?

Hello, I am trying to grab data from localStorage and use it to change the text in a button. This system should detect if a user has clicked the button before and say "continue" instead of "start." I made a useUserHistory hook to wrap this behaviour. ```ts...

TypeScript linting errors with turborepo

Is it normal for turborepo projects to produce TS linting errors in VS Code when refactoring? Seems like every time I rename a file or change a schema, I get red squigglies everywhere. Restarting the TS Server via the command palette doesn't help; I have to restart VS Code entirely. Does this sound familiar to anyone else? I'm using create-t3-turbo (https://github.com/t3-oss/create-t3-turbo), and I can repro the issue from a fresh clone of that repo without any major edits. I've opened an issue on that repo, but I wanted to check if this goes beyond that project....
Solution:
Ok, so after spinning up a fresh turborepo (not create-t3-turbo), it works fine. So it must be an issue with that particular project.

What’s the best way to host my Next.js project if I need to have a static IP address?

Hey everyone, I've built my startup project using the T3 stack and initially hosted it on Vercel, which has been working perfectly so far. However, as the project is gaining more users, I need to connect it to my Supabase database using a secure network. Specifically, I need to restrict IP access to the database, which requires hosting my project in a way that provides a static IP. Can anyone guide me on a good way to achieve this? I feel that using an EC2 instance on AWS might be overkill, and I haven't found a better alternative yet. I've looked into Netlify, Railway, and a few others but haven't decided on the best option....

how to fix images adjusting after loading

i am running into a problem where the images adjust their size after the page loads i don't know what is causing this to happen any help ?
No description