#help me solving error

8 messages · Page 1 of 1 (latest)

next cipher
#

hey developers !!!

i dont know why but i am getting this error
my code is

"use client"
import { UploadDropzone } from "@/lib/uploadthing"
import '@uploadthing/react/styles.css'
interface FileUploadProps {
onChange: (url?:string)=> void
value: string
endpoint: "messageFile" | "serverImage"
}

export const FileUpload=({
onChange,
value,
endpoint,

}: FileUploadProps)=>{
return(
<div>
<UploadDropzone
endpoint={endpoint}
onClientUploadComplete={(res)=>{
onChange(res?.[0].fileUrl)
}}
onUploadError={(error: Error)=>{
console.log(error);

}}

        />
    </div>
)

}
please check if u could help me with this

image.png
merry girderBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

prisma lichen
#

you are passing the function "onChange" to a client component. To pass functions from server to client is only possible with server functions. So remove the onChange Method and you are good to go or change it to a server function

harsh cedar
#

You can pass a function from server to a client component, but the function in the server component must be with "use server" in the beginning

  export const ServerComponent = () => {
    const someFunction = async (someProp: any) => {
      "use server"
      ...
    };

  return (
    <>
      <ClientComponent someFunction={someFunction} />  
    </>
  )
}

// In a different file

"use client"
export const clientComponent = (props) => {
   const { someFunction } = props;

   const invokeServerFunction = () => {
      someFunction(prop)
   }
  
  return (
    <>
      <button onClick={() => invokeServerFunction}></button>
    </>
  )
}
#

This is by using the serverActions --> you need to mark the function as async

#

@next cipher

prisma lichen
prisma lichen
#

@next cipher ?