错误：“仅允许在‘使用服务器’文件中导出异步函数”

Question

layout.tsx我正在尝试在Next.js 13 的目录中使用app以使所有页面上都存在导航布局。我设法做到了，当用户注销/登录时，导航栏会发生变化，但问题是我必须刷新页面（F5）才能看到导航栏上的更改。我认为这个问题与缓存有关，这就是我尝试使用export const dynamic = 'force-dynamic'.

我还将客户端组件添加到服务器组件中，因为我认为这会是问题所在，但它并没有解决问题。我想用它export const dynamic = 'force-dynamic'来处理缓存，但现在我遇到了一个似乎无法解决的错误。我收到的错误消息是：

错误

Only async functions are allowed to be exported in a "use server" file.

这是详细的错误跟踪：

./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();
   `----

代码

以下是导致错误的每个相关文件的代码：

文件：ClientInsideServerLayout.tsx

Only async functions are allowed to be exported in a "use server" file.

文件：ClientLayout.tsx

./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();
   `----

这是我正在使用的代码RootLayout：

'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>
      </>
    )
  }

这是上下文的目录结构：

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

问题

有人可以解释为什么会发生此错误，以及如何修复它，同时在单击注销按钮时保留布局更新功能？我想实现这一点而无需刷新页面。

任何见解或建议将不胜感激！谢谢你！

Answer 1

在接下来的 14 年中，我遇到了类似的问题，当时我使用 index.ts 文件来集中服务器操作的导出。问题是我需要'use server'从 index.ts 文件本身中删除 。

错误的：

'use server'

/**
 * Simplify and centralize server action exports
 */
export { signIn } from "./signIn";
export { signOut } from "./signOut";
export { createComment } from "./createComment";
export { createPost } from "./createPost";
export { createTopic } from "./createTopic";

正确：从文件顶部删除使用服务器。

/**
 * Simplify and centralize server action exports
 */
export { signIn } from "./signIn";
export { signOut } from "./signOut";
export { createComment } from "./createComment";
export { createPost } from "./createPost";
export { createTopic } from "./createTopic";

createComment 服务器操作示例

"use server";

export async function createComment() {}

在每个单独的服务器操作文件的顶部正确地async从中导出函数。use server

希望这对某人有帮助。