TTC
Theo's Typesafe Cultterlan8892

how to import server action function to client component from file that has "server-only" package?

So I have the following client component which calls a server functions. but inside of actions file, when i import "server-only" package, it doesn't work anymore. How can I fix this? Thanks
No description
No description
No description
M
michaeldrotar•15d ago
Can you explain what "doesn't work anymore" means? Is there an error? If you're looking for it to console.log something be sure to check server logs, not browser logs
T
terlan8892•15d ago
I showed error on the third screenshot. I want to have "import server-only" in my actions file. but when i have that, i cannot use those actions in client components. that's what i am trying to do.
M
michaeldrotar•15d ago
Sorry, I only saw the first screenshot. I believe they're 2 separate things for solving 2 separate problems. - use server indicates a server action - server-only throws if used in a client Despite the error sounding like something specific to the pages directory, that seems to just be an assumption. The actual code simply imports a file that always throws an error on client and imports one that is empty on server. There's no logic to check if you're in a pages directory or not. The behavior you're seeing is also noted in the docs as being intentional
Now, any Client Component that imports getData() will receive a build-time error explaining that this module can only be used on the server.
https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#keeping-server-only-code-out-of-the-client-environment So I believe you just simply don't use that in this case. But lmk if you've seen something to the contrary. You could also search the browser js to see if your function does indeed exist there - I haven't done that but it sounds like nextjs wires up server actions in a way that the function won't be sent to the browser since it's marked as use server
T
terlan8892•15d ago
"logic to check if i am in a pages directory"?? i feel like you generated the answer with ai honestly. there is nothing to do with pages directory here
M
michaeldrotar•15d ago
The error you got references it
No description
T
terlan8892•15d ago
sorry, well i am not using pages directory. i just want my action to work on client component. but the action should be in a file that has "server-only" import in it.
B
Bohdan•14d ago
what do you want to achieve with "server-only"? looks like an XY problem to me
T
terlan8892•14d ago
"server-only" is to make sure that functions defined inside of the file can only be imported in server components and it prevents importing them on client components. so that's why i want to have in my actions file. however i have other question as well where theo was able to import server-only function in client component. https://discord.com/channels/966627436387266600/1020552951116333217/threads/1234495920129703947
Discord
Discord - A New Way to Chat with Friends & Communities
Discord is the easiest way to communicate over voice, video, and text. Chat, hang out, and stay close with your friends and communities.
T
terlan8892•14d ago
i think i am also confused on when to use "server-only" and when to use "use server" or if we should use both always to indicate that this code should run in the server + it cannot be imported in client components.
B
Bohdan•14d ago
they are actually opposites: "use-server" marks a server side function or an entire module (file) as callable from the client. an http handler will be created under the hood for that. "server-only" ensures that a module will never be directly used from the client. basically, if you try to import a "server-only" module in a "use client" module, the import won't work.
M
michaeldrotar•14d ago
server-only and use server are not the same thing again, find an example that uses both. Your other thread, as Bohdan pointed out, does not - you were mixing up two different api consts server-only is also years old.. I've never used it, but I would imagine a proper use case would be for /api routes and, more specifically, util files used by those routes
B
Bohdan•14d ago
Think this way: You write server-side code (RSC) by default and have direct access to whatever you need, be it DB, external services or .env secrets. Everything is rendered on server and send to the client as markup. So far none of the JS you write gets shipped to the client, all without any need for "use server" or "server-only". If you need some code to run client-side (primarily to have state and interactivity via hooks), you can opt into this with "use client". Think an interactive island in a sea of "static" markup. A client component will be run (rendered) twice: first on server, generating markup, just like the code outside of the island, then sent over the wire as a bundle that consists of its markup (that we just generated) + its JS code. The JS code will then run for the second time, adding bindings (like event listeners) to the markup. This second execution is called hydration. In order to pass data to client-side islands, you can pass it as a prop from an RSC. It will be used for the initial pre-hydration rendering, then serialized and sent to client for hydration. Now we also need to take care of the communication from client-side islands back to the server. This is where "use server" comes into play. It allows you to expose a server function to your client components, which you can then either directly import in client components or pass as a prop from a server component. import "server-only" marks a module's contents as truly server only. If you attempt to import such a module in a client component, it won't work. Note that this explanation doesn't cover using server actions in RSC forms as this would be too much all at once.
Want results from more Discord servers?
Add your server
More Posts
Deploying a dockerized next.js appHey everyone! Has anyone deployed a Dockerized Next.js application to production before? I’m lookingHas anyone used JSON Patch with an authoritative server state?Has anyone implemented JSON Patch over WebSocket? It seems like it is just what I need, but there'sHow would you structure the backend for an application like this?I have a simple app I want to rebuild in T3, and curious what approach would work well, I haven't usPlease help me save our internal app from cookies set at subdomains in our company!Our Nodejs Express application is seeing 400 bad request responses and 413 request header too large Fail to try beta version of Typescript because @t3-oss requirementhello guys, noob question, how to bypass peer dependencies requirement? i want to use typescript 5.5Module not found: Can't resolve './utils/createUtilityFunctions.mjs't3 starter app with nextauth auth.ts config problems```tsx const config = { providers: [GoogleProvider, FacebookProvider], adapter: DrizzleAdapter(dwhats the proper way to disable auto zoom focus on inputs and textareas on mobile?whats the proper way to disable auto zoom focus on inputs and textareas on mobile? i know you can seinternal server error when deploying to DigitalOceanWhen entering some specific pages in my site, the server gets an error and shuts down. Why is this error: NEXT_REDIRECTI'm doing a server call in RSC, but it crash the app and show this kind of error and It shows in theNodejs take less time instead BunWhy they close this issue?? https://github.com/oven-sh/bun/issues/10519Testing in reactHey everyone, I’ve been pondering whether diving into learning how to test React code is worth it. DCreate t3 app with nextauth and new router problemsI have a question regarding the t3-createapp with nextauth. In what file do I put my <SessionProvidModals failing from tutorialhttps://github.com/mchisolm0/gallery/pull/2 I am having trouble getting the modals/app router workiBenefits of using auto incrementing primary keys?Is there any benefit of using auto incrementing columns as primary keys in postgres when I have anotIs Tanstack Query needed when using Next Route Handlers?Basically what it says. To my understanding a [Route Handler](https://nextjs.org/docs/app/building-yt3 env doesn't seem to work with docker compose buildI'm working to validate my application before pushing it to my CI/CD pipeline. I keep getting faileNextAuth - Email Provider Breaking Google Provider!Howdy, Some users of my app (app.getriver.io) started reporting not being able to log in to our appVSCode Import Autocomplete Purgatory (Relative, absolute, and barrel paths)I hope I'm missing some easy setting, otherwise this UI seems pretty terrible. Why does the autocompThe In App vs NextAuth problemIf you open the app link from a mobile app (like discord/telegram) and it opens in the in-app browse