next 13 forms
Answered
Toyger posted this in #help-forum
ToygerOP
alr for the last four hours I've been trying to figure out how to do forms in next 13 and I can't figure it out. some error about "Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server"", so I put that string everywhere and it still doesn't do anything. idk what to do at this point, I just want to have a form and then execute an async function after I submit it.
Answered by Marchy
You know.. there this whole section in the docs…
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions#usage-with-client-components
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions#usage-with-client-components
65 Replies
ToygerOP
so like I think the issue is that the library I'm using in the function only works in node.js and I'm trying to do client-side stuff, but it doesn't work like that
someone said I should move everything into page.tsx
so I did
and then I got this:
- error Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
<form style={{...}} className=... action={function} children=...>
- error Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
<form style={{...}} className=... action={function} children=...>
there's a use server at the top of the file and in the function
Morelet’s Crocodile
I believe your page needs to be marked ‘use client’.
ToygerOP
page.tsx?
then it won't work because the library needs to run on the server, not the client
it uses undici btw
yeah see Module not found: Can't resolve 'async_hooks'
and I want the page to be server-sided but I think the function needs to be client side, it's a post request to some api
so ig what I'm asking is how do I embed something that's like a client-side function into server-side like that
ToygerOP
I heard about server actions but they don't seem to work here
Morelet’s Crocodile
Sorry I don't have an answer for you. I am also new to nextjs 13. Have you read through these sections of the docs, may be helpful? https://nextjs.org/docs/getting-started/react-essentials#nesting-server-components-inside-client-components or https://nextjs.org/docs/getting-started/react-essentials#passing-props-from-server-to-client-components-serialization
ToygerOP
hm, I'll try wrapping it maybe
but idk if that will work tbh, this sounds like an architecture problem
and a big one lol, idek if this was a problem in 12 or 11
technically I wrapped the form in a section tag so that should work, ig it needs to be explicit tho
other thing is that the library is node.js only. so I want to be able to send that request but not from the client. yeah ik, this is what I've been confused about
Morelet’s Crocodile
What if you put that call in an API route, and then fetch that API route from your client component? Not sure if that is a good practice or not though, I am firing from the hip rn lol
forms work perfectly fine with server actions and server components
its your library. you will need to show the code to be able to point out where the problem is
ToygerOP
yeah that was my idea but I tried it and it didn't work
You have posted no code. You should be able to call the server action directly from the fort action.
ToygerOP
I think you mean that the site is mine but technically the library's mine too. anyway here's what I got in the form:
<form
className="mx-auto"
action={(formData) => {
'use server';
createPost(formData, 'ID_REDACTED');
}}
>I have to redact some stuff since my name's in some of it
createPost is an async function that just calls the library itself
yeah I tried it with await too, didn't work
Don’t use an inline function
ToygerOP
wdym
then how will I send the formData
Should be like ‘<form action={someaction}>’
ToygerOP
well but the data I'm sending needs to be a param in this function
Like?
What would you need to pass? All of the form data is provided
ToygerOP
so you see that I got createPost up there right?
I have formData which has a text key
text key contains the contents of the post
Yep, but not sure why you couldn’t just add that to a hidden field
ToygerOP
? ok I admit I'm kinda lost lol
I want to send the formData over
there is an exact example of this in the docs
did you read the docs on server actions?
ToygerOP
could you send it?
I think I did read it but I def would have copy and pasted from there lol
so
go to the docs
type server actions
ToygerOP
alr
theres an example of a wrapped with extra data function
plain as day
ToygerOP
alr so I think I had something similar to the import in the usage but I'll try it again
so assuming I got a client component that imports a server action, does the client component work with the server stuff in page.tsx?
if you do it the way the docs explain you need to for client, yes.
You know.. there this whole section in the docs…
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions#usage-with-client-components
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions#usage-with-client-components
Answer
ToygerOP
yeah I'm looking at that rn
sorry just give me a minute, I've never used 13 before
Its ok to be new. Its not ok to not read the docs and blindly ask for help haha
ToygerOP
alr and now it works, idk why but it does
theres only so many people who help, but the docs are infinitely scaleable
ToygerOP
well I didn't even know if server actions were the proper way
but here I'll try and see if it works with the library because I'm just using fetch
interesting, so fetch works but if import the library I get something like "Error: A "use server" file can only export async functions, found object."
oh wait nvm, it's something different, I'm exporting something
alr I'll close this, thanks y'all