Next.js 13 Error: "Only async functions are allowed to be exported in a 'use server' file"
Answered
Miniature Schnauzer posted this in #help-forum
Miniature SchnauzerOP
### Part 1:
I am trying to use
I also added the client component to a server component because I thought that would be the issue, but it didn't solve the problem. I wanted to use
### Error
And here is the detailed error trace:
I am trying to use
layout.tsx in the app directory to have a nav layout that is present on all the pages. I managed to make it so that when the user logs out/signs in, the navbar changes, but the issue is that I have to refresh the page (F5) to see the change on the navbar. I think this issue is related to the cache, and that's why I am trying to use export const dynamic = 'force-dynamic'.I also added the client component to a server component because I thought that would be the issue, but it didn't solve the problem. I wanted to use
export const dynamic = 'force-dynamic' to deal with the cache, but now I'm encountering an error that I can't seem to resolve. The error message I'm getting is:### Error
Only async functions are allowed to be exported in a "use server" file.And here is the detailed error trace:
./app/components/ClientInsideServerLayout.tsx
Error:
x Only async functions are allowed to be exported in a "use server" file.
,-[C:\Users\zantl\OneDrive\Documentos\GitHub\sssss\gestion-gastos-supabase\app\components\ClientInsideServerLayout.tsx:2:1]
2 |
3 | import { getSessionStatus } from "../ServerActions/isUserLoggedIn";
4 | import ClientLayout from "./ClientLayout"
5 | export const dynamic = 'force-dynamic'
: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
6 |
7 | export async function ClientInsideServerLayout() {
7 | const isLoggedIn = await getSessionStatus();
`----Answered by joulev
Log in with a server action (this time you need “use serverâ€, but for the server action only)
Use revalidatePath/revalidateTag inside that server action to revalidate the client side cache
or
Use router.refresh() after logging in to refresh the server components
or
Just do a hard refresh, it’s not uncommon to do hard refreshes on login/logout and it’s imo not too bad UX
Use revalidatePath/revalidateTag inside that server action to revalidate the client side cache
or
Use router.refresh() after logging in to refresh the server components
or
Just do a hard refresh, it’s not uncommon to do hard refreshes on login/logout and it’s imo not too bad UX
9 Replies
@Miniature Schnauzer ### Part 1:
I am trying to use `layout.tsx` in the app directory to have a nav layout that is present on all the pages. I managed to make it so that when the user logs out/signs in, the navbar changes, but the issue is that I have to refresh the page (F5) to see the change on the navbar. I think this issue is related to the cache, and that's why I am trying to use `export const dynamic = 'force-dynamic'`.
I also added the client component to a server component because I thought that would be the issue, but it didn't solve the problem. I wanted to use `export const dynamic = 'force-dynamic'` to deal with the cache, but now I'm encountering an error that I can't seem to resolve. The error message I'm getting is:
### Error
plaintext
Only async functions are allowed to be exported in a "use server" file.
And here is the detailed error trace:
plaintext
./app/components/ClientInsideServerLayout.tsx
Error:
x Only async functions are allowed to be exported in a "use server" file.
,-[C:\Users\zantl\OneDrive\Documentos\GitHub\sssss\gestion-gastos-supabase\app\components\ClientInsideServerLayout.tsx:2:1]
2 |
3 | import { getSessionStatus } from "../ServerActions/isUserLoggedIn";
4 | import ClientLayout from "./ClientLayout"
5 | export const dynamic = 'force-dynamic'
: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
6 |
7 | export async function ClientInsideServerLayout() {
7 | const isLoggedIn = await getSessionStatus();
`----
Miniature SchnauzerOP
### Part 2:
### Code
Here's the code for each relevant file that's causing the error:
File:
File:
Here's the code for the
### Code
Here's the code for each relevant file that's causing the error:
File:
ClientInsideServerLayout.tsx'use server';
import { getSessionStatus } from "../ServerActions/isUserLoggedIn";
import ClientLayout from "./ClientLayout"
export const dynamic = 'force-dynamic'
export async function ClientInsideServerLayout() {
const isLoggedIn = await getSessionStatus();
return (
<>
<ClientLayout isLoggedIn={isLoggedIn}></ClientLayout>
</>
)
}File:
ClientLayout.tsx'use client'
import Link from 'next/link';
import { useRouter } from 'next/navigation'
// ... rest of the code ...Here's the code for the
RootLayout that I'm using:// Existing RootLayout code
'use server';
import './globals.css';
import { getSessionStatus } from './ServerActions/isUserLoggedIn';
import { ClientInsideServerLayout } from './components/ClientInsideServerLayout';
// ... rest of the code ...### Part 3:
Here's the directory structure for context:
### Question
Can someone explain why this error is happening, and how can I fix it while keeping the layout update functionality when clicking the log-out button? I want to achieve this without having to refresh the page.
Any insights or suggestions would be greatly appreciated! Thank you!
Here's the directory structure for context:
app/
auth/
callback/
route.ts
sign-in/
route.ts
sign-out/
route.ts
sign-up/
route.ts
components/
ClientInsideServerLayout.tsx
ClientLayout.tsx
Login.tsx
tablaIngresos.tsx
ingresos/
page.tsx
login/
messages.tsx
page.tsx
ServerActions/
isUserLoggedIn.ts
_examples/
client-component/
page.tsx
route-handler/
route.ts
server-action/
page.tsx
server-component/
page.tsx
auth-form.tsx
favicon.ico
globals.css
layout.tsx
page.tsx
components/
LogoutButton.tsx
NextJsLogo.tsx
SupabaseLogo.tsx
types/
supabase.ts
.env.local
.gitignore
middleware.ts
next-env.d.ts
next.config.js
package-lock.json
package.json
postcss.config.js
README.md
tailwind.config.js
tsconfig.json### Question
Can someone explain why this error is happening, and how can I fix it while keeping the layout update functionality when clicking the log-out button? I want to achieve this without having to refresh the page.
Any insights or suggestions would be greatly appreciated! Thank you!
is any of your layouts client components as once one part is client, the whole route below it is also?
and iirc putting "use server" at the top does nothing, the best thing you can do is [import
server-only](https://nextjs.org/docs/getting-started/react-essentials#keeping-server-only-code-out-of-client-components-poisoning) to cause an error if imported from client componentYou have to remove the use server. It is used to mark server actions not server components, and server action files have restrictions compared to server component files (e.g. you can only export async functions with serialisable signatures)
ahh it actually does it differently and not ignored
@joulev You have to remove the use server. It is used to mark server actions not server components, and server action files have restrictions compared to server component files (e.g. you can only export async functions with serialisable signatures)
Miniature SchnauzerOP
Thank you for your guidance on this issue. Removing the "use server" indeed fixed the specific error "Only async functions are allowed to be exported in a 'use server' file," and now the pages can compile successfully.
However, I'm still facing an issue with the behavior I wanted to achieve. Despite resolving that error, I still have to refresh the page manually when I log out so that the navbar updates correctly. It seems that the change has not resolved the underlying problem of the navbar not dynamically updating as intended.
Below, I've included a video link showing the behavior I'm currently getting, which is not the desired outcome. If you have any further insights or suggestions to help me overcome this obstacle, they would be greatly appreciated!
Thank you once again for your assistance!
However, I'm still facing an issue with the behavior I wanted to achieve. Despite resolving that error, I still have to refresh the page manually when I log out so that the navbar updates correctly. It seems that the change has not resolved the underlying problem of the navbar not dynamically updating as intended.
Below, I've included a video link showing the behavior I'm currently getting, which is not the desired outcome. If you have any further insights or suggestions to help me overcome this obstacle, they would be greatly appreciated!
Thank you once again for your assistance!
@Miniature Schnauzer Thank you for your guidance on this issue. Removing the "use server" indeed fixed the specific error "Only async functions are allowed to be exported in a 'use server' file," and now the pages can compile successfully.
However, I'm still facing an issue with the behavior I wanted to achieve. Despite resolving that error, I still have to refresh the page manually when I log out so that the navbar updates correctly. It seems that the change has not resolved the underlying problem of the navbar not dynamically updating as intended.
Below, I've included a video link showing the behavior I'm currently getting, which is not the desired outcome. If you have any further insights or suggestions to help me overcome this obstacle, they would be greatly appreciated!
Thank you once again for your assistance!
Log in with a server action (this time you need “use serverâ€, but for the server action only)
Use revalidatePath/revalidateTag inside that server action to revalidate the client side cache
or
Use router.refresh() after logging in to refresh the server components
or
Just do a hard refresh, it’s not uncommon to do hard refreshes on login/logout and it’s imo not too bad UX
Use revalidatePath/revalidateTag inside that server action to revalidate the client side cache
or
Use router.refresh() after logging in to refresh the server components
or
Just do a hard refresh, it’s not uncommon to do hard refreshes on login/logout and it’s imo not too bad UX
Answer
@joulev Log in with a server action (this time you need “use serverâ€, but for the server action *only*)
Use revalidatePath/revalidateTag inside that server action to revalidate the client side cache
or
Use router.refresh() after logging in to refresh the server components
or
Just do a hard refresh, it’s not uncommon to do hard refreshes on login/logout and it’s imo not too bad UX
Miniature SchnauzerOP
This solved my issue! Thank you!