bunx shadcn@latest init
I prompted v0.dev to create a starter template and I copied the command and changed the npx to bunx --bun and ran it only to find this error
...
error: Cannot find module '@jridgewell/gen-mapping' from '/private/tmp/bunx-501-shadcn@latest/node_modules/@babel/generator/lib/source-map.js'
error: Cannot find module '@jridgewell/gen-mapping' from '/private/tmp/bunx-501-shadcn@latest/node_modules/@babel/generator/lib/source-map.js'
Solution:
simply run
bun pm cache rm and rerun the code to fix everythingHow to upload a PDF file to uploadthing from a route.ts file
```typescript
export async function uploadFileToProfile(
pdfBuffer: Uint8Array<ArrayBufferLike>,
uniqueMetadataId: string,
) {...
Self hosted Postgres on Create t3 Turbo
I am low key struggling to convert
create-t3-turbo db package from using Vercel Postgres to Railway postgres connection.
This is what I have now in my client.ts
```...Vercel Toolbar in Github Codespace
Has anyone successfully set up a github codespace for NextJS development and added the Vercel toolbar to their dev server, such that you can run
next dev and see the toolbar when going to https://<codespace-name>-3000.app.github.dev? I keep getting this error:
Error loading microfrontend config: TypeError: Failed to fetch...Multi-Tenant Architecture
Hello good folks. The purpose of this question is to get insight from the more experienced community.
I'm trying to build a B2B system with data isolation concerns. For now, I chose to go with a schema-per-tenant data partition strategy. All tenants will share a common set of tables attached to their schema. But, the problem with this approach is the schema managment. To change even a single column across all schemas when you have many tenants is a challenge.
I've tried an approach where I use drizzleORM to generate the "template" migration scripts. Then when a request comes in, I read the sql content from the file and replace the placeholder with the tenant's schema name. This works fine for creating new tenants. But the real problem now is global updates. I've not found a reliable way to do this so far....
Error: Attempted to call g() from the server but g is on the client
I'm encountering an error when trying to upload files using the @uploadthing/react package in my Next.js project. The error message indicates that a client-side function g() is being called from the server, which is not allowed.
Error Message:
...
Error: Attempted to call g() from the server but g is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.
at <unknown> (file://C%3A/Users/Rahul/Desktop/jobfynder/node_modules/.pnpm/%40uploadthing%2Breact%407.1.2_next%4015.0.3_react-dom%4019.0.0-rc-66855b96-20241106_react%4019.0.0-rc-66_7ieb7immhhmk3vcbvr5vvoo4ai/node_modules/%40uploadthing/react/dist/button-client-DpQoAqtf.js/proxy.js:28:23)
Error: Attempted to call g() from the server but g is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.
at <unknown> (file://C%3A/Users/Rahul/Desktop/jobfynder/node_modules/.pnpm/%40uploadthing%2Breact%407.1.2_next%4015.0.3_react-dom%4019.0.0-rc-66855b96-20241106_react%4019.0.0-rc-66_7ieb7immhhmk3vcbvr5vvoo4ai/node_modules/%40uploadthing/react/dist/button-client-DpQoAqtf.js/proxy.js:28:23)
ArmCord in Theo's video
In this video you showed your currently opened apps and briefly mentioned that you are using a custom Discord Client called ArmCord. I found one github repository but it had 0 stars and is mot activity maintained. And it's a fork of LegCord. What do you use and or what should I use? Thanks in advance
Check for ability to upload file before doing it
Hi all, I'm integrating a limit in my app, in which the free tier allows for X number of files and X number of audio files hours a month.
I'm using UploadThing for the file upload and I think it's great, but I want to understand if there's a way to do this kind of checks (maybe at the middleware level) before starting the upload on the UT servers.
I know that I can check for this using the
onBeforeUploadBegin handle on the uploadthing client library, but I would like to also implement this check on my backend.
Thanks in advance, and once I've finished building my app (almost there) I'll be more than happy to become a paid user!...Something went wrong. Please contact UploadThing and provide the following cause: TypeError: $.get(.
it does complete the upload, but still throws this error:
` const uploader = createUploader('imageUploader', {
onClientUploadComplete: (res) => {
const updateOK = saveDogPicture(editingDog.id, res[0].url);...
How to add event listeners in React without useEffect
I heard theo say in multiple videos that useEffect should be used only when nececairy. I was wondering if there is a better way to add this event listener without using useEffect.
useEffect(() => {
const handleEscape = (e: KeyboardEvent) => {
if (e.key === "Escape") setIsEditProfileModalOpen(false)...
Type error
Can anyone help me why I get this error on line 36?
nullis in the type but somehow not asignable to it...
https://tsplay.dev/WJP25N...Hono RPC not setting cookies on fetch
When using the rpc client in nextjs, it doesn't include the headers for the request like a normal fetch does, this ends up leaving out items like cookies which is needed for authentication on the server.
```ts
import type { AppType } from "@buzztrip/api/src";
import { env } from "env";...
Slightly misleading video (moveBefore)
Hey just something I wanted to call out on the most recent video regarding the
moveBefore API.
I felt like the intro was misleading to a degree. While I agree with the content of the video, saying that its not possible to move an element I dont believe was accurate and its really easy for people to take that as a all encompassing fact. Isn't it true that it IS possible, but not all elements will behave the same after the reparent? Like for a lot of what I would call the basic elements, I think using appendChild works. But sure, for iframes, inputs state, totally agree, its jacked up.
I wasn't sure if I was missing something else here, since iono this demo seems to work (minus the iframe that we established has issues)....Network Issue
I want to run my app and call all APIs offline without needing a WiFi network. I’m using Next.js, tRPC, and Express, but when I’m offline or not connected to WiFi, the APIs don’t work. When I connect to any WiFi network (with or without internet), the APIs work instantly. Is there a way to run Next.js offline and call the Express API, which is also running offline? My main goal is to run everything completely offline.
Skip query: best strategy?
Hi, I've been searching the docs and previous posts and I can't find the answer.
What is the best strategy for skipping a query using the api from trpc/react?
let's say as an example, that i have a modal, where I want to fetch some data for it when is opened, and skip it if is closed. With tanStack query you can pas sin the skip token, but when using trpc/reat I can't find the way to pass in the skip token, any ideas?
...
Moving off Create React App
As the title implies, I want to move our relatively complex React app off of CRA mainly for speed benefits. For context, we were on Angular 14 until we had a corporate thingy to either upgrade or do what we did which was move to React and rebuild from the ground up. I had just joined the team and didn’t know CRA and how painful at times it would be. We use TS with SSRM (needed for AG Grid) and use Jest as a test suite and Go in the backend. I can add more details as needed. Jest honestly takes y...
T3 Stack Newbie, using NextJS 15 and tRPC, no utils/trpc.ts
Hey hey. Trying to kickstart a T3 stack project to test it out, generated the boilerplate and such.
There's no utils folder or trpc.ts file with the type-safe hooks in. How do I access my router stuff? Seeing mixed answers for different versions...
``` "dependencies": {...
Specify account id in Next.js config pathname
In the video linked below (minute 5:14) Theo explains that it is important to add your UploadThing account identifier to the pathname in
next.config.js to prevent others from optimising their images through your your Next.js App. However it doesn't seem like my images uploaded to UploadThing are hosted under that URL route.
In the image URL, the file key comes right after /f/, for example: https://utfs.io/f/osAUv9zfuFLpB7YEJ936t2S0eHjMlpcf4KR8Wm17iZDb4k3N. My account identifier (e.g. xyz ) is not part of the image url. I'm sure I must be doing something wrong but it is not obvious to me what it is?
https://youtu.be/jsuNjCAngnQ?si=9wzXylcg3r619IEn&t=314...debbugger unbound?
Is anyone having some issues with the vs code not bounding breakpoints? in the create-t3-turbo example
tried a few things from here but still seeing some issues like it will only bind like to packages outside nextjs(e.g ./packages/api/**) but will also only bind ./app/nextjs/src/env.ts but nothing after that
Has anyone experience anything similar?...
