TTC
Theo's Typesafe Cult•2mo ago
persianninja

uploadthing instructions regarding "re-exporting with the types assigned"

Hello all, im going through Theo's NextJS tutorials (the updated one with app router). I was going throught the setup steps for uploadthing and was wondering what this means: "We provide components to make uploading easier. We highly recommend re-exporting them with the types assigned, but you CAN import the components individually from @uploadthing/react instead." https://docs.uploadthing.com/getting-started/appdir This is regarding this block of code: 
import {
  generateUploadButton,
  generateUploadDropzone,
} from "@uploadthing/react";
import type { OurFileRouter } from "~/app/api/uploadthing/core";
export const UploadButton = generateUploadButton<OurFileRouter>();
export const UploadDropzone = generateUploadDropzone<OurFileRouter>();
import {
  generateUploadButton,
  generateUploadDropzone,
} from "@uploadthing/react";
import type { OurFileRouter } from "~/app/api/uploadthing/core";
export const UploadButton = generateUploadButton<OurFileRouter>();
export const UploadDropzone = generateUploadDropzone<OurFileRouter>();
What does that mean re-exporting them with the types assigned? Not sure what those steps would look like. Thanks for any guidance. PS with the existing code i get this error (screenshot attached): "Error: Invalid semver requirement: undefined"
No description
1 Reply
persianninja
persianninjaOP•2mo ago
Regarding the 2nd question about the semver error ... think i figured it out. this tutorial (https://www.youtube.com/watch?v=d5x0JCZbAJs) does not explicitly show that UploadButton has to be in a client component (around 1h:00m:24s), but the uploadthing official docs do. I just added "use client" to TopNav and it then worked. I wonder if the uploadthing library should specify that in their own code/library so you don't need to add to TopNav or so u don't need to create a UploadButtonWrapper component to just say "use client;" in NextJS's App Router. The error went away and i see the UploadButton now. I am still curious about what "re-exporting" means, what those steps are, and why you'd do that.
Theo - t3․gg
YouTube
From 0 to Production - The Modern React Tutorial (RSCs, Next.js, Sh...
The Modern React Tutorial is FINALLY done. This one took awhile. Shoutout to ALL the awesome sponsors who made this possible: - Vercel - Clerk - Posthog - Sentry - Upstash NOTES I MENTION DURING VIDEO "Nextgram": https://github.com/vercel/nextgram/tree/main/app "useUploadThingInputProps": https://gist.github.com/t3dotgg/0464ca78e94acce80ba04ca...

Did you find this page helpful?