Next.js Discord

Discord Forum

Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by m

Answered
Alligator mississippiensis posted this in #help-forum
Open in Discord
Alligator mississippiensisOP
Am I being really dumb here, I keep getting this message, but I thought that's exactly what I am doing with the "use server" in the function. Additionally nothing is a client component...

I am sure its just me being an idiot with server actions. Thanks in advance

import DeezNotes from 'deeznotes'

export default async function page({ params }: { params: { noteid: string } }){
  const notesClient = new DeezNotes('user', 'password')
  const note = await notesClient.getNote(params.noteid)

// eslint-disable-next-line @typescript-eslint/explicit-function-return-type -- go away
async function deleteNote(){
"use server"
await notesClient.deleteNote(note.messageID)
}

    
  return (
    <div>
    <div>{JSON.stringify(note)}</div>
    <form
    action={deleteNote}
    >
    <button type="submit">Delete</button>
    </form>
    </div>
  )
}
Answered by aardani
move 
  const notesClient = new DeezNotes(
    "user",
    "password",
  );

to a separate file
View full answer

21 Replies

can you also fix the indentation of the code btw, its hard to read
Alligator mississippiensisOP
I am on latest. 14.0.1
Alligator mississippiensisOP
import DeezNotes from "deeznotes";

export default async function page({ params }: { params: { noteid: string } }) {
  const notesClient = new DeezNotes(
    "user",
    "password",
  );
  const note = await notesClient.getNote(params.noteid);

  async function deleteNote() {
    "use server";
    await notesClient.deleteNote(note.messageID);
  }

  return (
    <div>
      <div>{JSON.stringify(note)}</div>
      <form action={deleteNote}>
        <button type="submit">Delete</button>
      </form>
    </div>
  );
}


hopefully this is more readable
Alligator mississippiensisOP
I think it could the same error as this

https://github.com/vercel/next.js/issues/49983
But I'm not sure how I would go about resolving it
aardani
oh
i see
its hard to see but you've passed a function from server component to a client component @Alligator mississippiensis
just like shuding said
well its not client component but a client boundary
aardani
move 
  const notesClient = new DeezNotes(
    "user",
    "password",
  );

to a separate file
Answer
Alligator mississippiensisOP
ok, and then and import it back in I guess?
import notesClient from './new-file'
i will try that shortly, thank you for your help
Alligator mississippiensisOP
I have tried that, but i get the same error.
if i mark the new seperate file as "use server" then I get the message that you can only export async functions from server components
```
Im assuming the issue is that notesClient isn't serializable, but its just a bad error message for it
aardani
whats ur "new-file" looks like
also like, you dont have to use inline server action
Alligator mississippiensisOP
I got it working with exporting from the new-file and importing it back in

the only 'use server' is inline in the server action as in the example before

after doing that I had to restart the dev server and delete my .next folder
Thanks for your help @aardani
aardani
no problem