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

Testing in react

Hey everyone, I’ve been pondering whether diving into learning how to test React code is worth it. Does anyone here test their React code, and if so, how crucial do you find it? Appreciate any insights or experiences you can share!

Create t3 app with nextauth and new router problems

I have a question regarding the t3-createapp with nextauth. In what file do I put my <SessionProvider> ? I would've assumed that the t3 app generator would handle that for me, but it didn't, and im not sure where to put it. I am trying to do it in the app/layout.tsx like i did with my normal next project that im using for reference, but its not working. ...

Modals failing from tutorial

https://github.com/mchisolm0/gallery/pull/2 I am having trouble getting the modals/app router working how I expect. When I click on pictures sometimes it loads, sometimes it gives "Unauthorized" errors, and sometimes it complains getImages(idAsNumber) is not a function. I have created a pull request on my repo in case that is helpful for context. I am getting off of hear to get some rest and hoping fresh eyes tomorrow may help me solve it. Thank you in advance if anyone has suggestions or wisdom....

Benefits of using auto incrementing primary keys?

Is there any benefit of using auto incrementing columns as primary keys in postgres when I have another column that is unique and can be used as a primary key?

Is Tanstack Query needed when using Next Route Handlers?

Basically what it says. To my understanding a Route Handler is basically a custom built endpoint that receives a Request and returns a Response. Standard REST-ful stuff really. With that in mind, if I'm fetching data on the client, would something like Tanstack Query still be relevant / provided any significant value? I know the Route Handlers already include caching and revalidation, as does TQ, but I'm not sure if TQ provides anything further that makes it worth including. Given the versatile nature of TQ and the sheer number of features, I imagine so, but wanted to check they weren't already covered by Next....

t3 env doesn't seem to work with docker compose build

I'm working to validate my application before pushing it to my CI/CD pipeline. I keep getting failed docker builds because it can't find my environment variables, I'm using the recommended dockerfile in the t3 documentation to build the container ```yaml app: build:...

NextAuth - Email Provider Breaking Google Provider!

Howdy, Some users of my app (app.getriver.io) started reporting not being able to log in to our app. We tested and figured out that some people who originally signed up with email + magic link are then trying to sign in with google (but connected to the same email they originally authenticated with) Is it possible to intercept login attempts like this so that you can interchangably login with email or google for the same email?...

VSCode Import Autocomplete Purgatory (Relative, absolute, and barrel paths)

I hope I'm missing some easy setting, otherwise this UI seems pretty terrible. Why does the autocomplete path for barrel imports not show up on autocomplete? Manually typing out import {Avatar} from '@components works and does not cause issues in the code, so this is certainly a VSCode setting of some sort ``` // src/app/_components/index.tsx import Avatar from "./Avatar";...
No description

The In App vs NextAuth problem

If you open the app link from a mobile app (like discord/telegram) and it opens in the in-app browser instead of the default browser, the Sign up will fail. Does anyone recommend any way to deal with this? I'm not sure if NextAuth has an option to allow built-in browsers, but I couldn't find anything. My other idea was to prompt the user to open the default browser instead, but this sucks...
Solution:
Thanks for the answer. I'm not exactly sure if the built-in browser was the problem, it was more of a guess. My friend and coworker @BigLung fixed it with the help of this post https://github.com/nextauthjs/next-auth/issues/519#issuecomment-1326847336...

TypeErrorinitialTree is not iterable in Modern React Tutorial vid

The images map correctly until I try clicking on one, so I think the error may be misleading me. I believe I have the modal set up to show the id at the bottom of the screen as shown in the tutorial, however, when I click the image I get the global error page. Sentry captures the above "initialTree is not iterable" which seems to mean I'm trying to map something that can't be mapped....
Solution:
I figured it out now. I misunderstood the folder structure. Correct: app/@modal/(.)img/[id]/ My error was thinking the (.) was another layer of the directory making it app/@modal/(.)/img/[id]....

T3 Roadmap? What would you recommend?

I recently landed an internship, and they use the T3 Stack. I already had experience with JS, React, and had briefly used Node.js with Express. Also I have decent database knowledge. I'm already learning Next.js 14, it hasn't been hard so far, but like I said, I haven't used Node.js too much, and my backend skills aren't good. Honestly I was mostly applying to Front-end positions, but got this Full-Stack one. The thing that is being hard for me the most is tRPC, I feel like I don't understand n...

are there any better logs for nextJS that are in English

just spent 30min playing around with this and trying to work out the problem all I did was copy and paste a table from Nextui and spent 30min breaking down and checking my code one section at a time to try to work out the erra Error: Functions are not valid as a child of Client Components. This may happen if you return children instead of <children /> from render. Or maybe you meant to call this function rather than return it. <... columns={[...]} children={function children}> ...

Should I report a bug to a federal(-ish) university without hopes of a bug bounty?

I live in nigeria, I attend national open university of nigeria. I recently found out a bug which allowed me to register all my courses without payment(I.E Basically attend the university for free), change stuff like number of credit units(which allows me to take on infinite courses, register courses I shouldn't have access to and stuff like that. There is prolly more (given their terribly designed api) but I didn't look further. I'm wandering whether I should report the bug since I dont know if I have hopes of a bug bounty. P.S I really need money rn so looking for any way to get some....

Fork bomb

Hi, i saw the new video from theo about the AI interview, and on the video he said to the AI to execute an bash fork bomb but forgot to execute it, does anybody knows if it is possible to execute an js forkbomb like this one **(function f() { require('child_process').spawn(process.argv[0], ['-e', '(' + f.toString() + '());']); require('child_process').spawn(process.argv[0], ['-e', '(' + f.toString() + '());']); }());** and crash its server?

Communication with server and client <nextjs>

i have a webhook which calls nextjs api, can that api call do something which triggers an action on

React Native Data Loader library

Does anyone know of any good data loader libraries that will prevent waterfalls in React Native? I know on web, frameworks like TanStack (https://tanstack.com/router/latest/docs/framework/react/guide/data-loading) and React Router (https://reactrouter.com/en/main/route/loader) have done a good job of hoisting data fetching code from the route level to the component level. Our main goal is to prevent loading waterfalls where a nested component only starts its API call after the parent component is done rendering....

Next.js as a client API choice

Having watched all theo's videos regarding next and APIs (mainly tRPC and server actions), i got the grasp of understanding of the stack and the decisions if a full-stack app should be built. However, let's imagine that there's a need of using next.js purely as a client solution, meaning there's already some api (be it graphql or rest) with other clients like mobile etc. What should be done in this case? As far as I understand, all the featurse like server actions with blazingly fast revalidation (revalidePath) or tRPC won't work. Should RSC be used in this case with simple fetch calls to the api, or it will be better to use next.js api as BFF with tRPC/server actions?...
Solution:
basically your server actions and query functions would act as thin wrappers around calls to the separate api, which allows you to use all the bleeding edge features like revalidatePath/revalidateTag

Should I start my own blog, or use an existing platform?

So I already have a few articles out on dev.to ( https://dev.to/noblica ) , and a few older ones on Medium. I like writing, and other than scratching that itch, I also wanna use it as a tool to showcase my skills. However, I am a bit torn on if I should continue writing on dev.to, or start my own blog on my own website? I think it could be a good idea, since people that are potentially interested in working with me, can just get all the info they need about me in one place. However, these blogging platforms are already there, and already have an established user base that I'm reaching with the articles I'm currently writing. So I'm not sure what the right move is? What do you guys think?...

Hi guys, I'm peter. I'm starting a new project with all the t3 start recommend

Everything ok, I'm the creation process, I'm using supabase as a db provider, but OKTA as a AUTH provider. and others things. At this moment i have this message: prisma:error Invalid prisma.account.findUnique() invocation: [next-auth][error][OAUTH_CALLBACK_HANDLER_ERROR] https://next-auth.js.org/errors#oauth_callback_handler_error ...

UTApi deleteFiles

Hi, I'm creating an e-commerce admin panel and I have made a function to delete the images you've uploaded for a product and it was working but not anymore, nothing was changed.