Next.js使用'use server'时出现模块找不到错误求助

错误信息 #

./node_modules/next/dist/build/webpack/loaders/next-flight-loader/action-client-wrapper.js:21:37
Module not found: Can't resolve 'react-server-dom-webpack/client.edge'

导入追踪路径 #

• ./components/template/Template.tsx
• ./pages/index.tsx

相关代码 #

Template.tsx #

"use server";

import Header from "../header/Header";
import Footer from "../footer/Footer";

type Props = {
  children: React.ReactNode;
  sliders?: React.JSX.Element;
};

const Template = ({ children = null, sliders }: Props) => {
  let isServer = typeof window !== "undefined" ? true : false;
  console.log(isServer);

  return (
    <div className="min-w-screen  min-h-screen bg-[#F8F9FA] overflow-hidden relative">
      <div
        className={` ${sliders != undefined ? "h-4.75xl" : "h-full"}    overflow-hidden`}
      >
        <Header slidersExist={sliders} />
        {sliders !== null && sliders}
      </div>
      {children}
      <Footer />
    </div>
  );
};

export default Template;

next.config.js #

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  experimental: {
    serverActions: true,
  },
}

package.json #

{
  "name": "blog-next-prisma-v2",
  "version": "0.1.0",
  "private": true,
  "prisma": {
    "seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts"
  },
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@prisma/client": "^5.2.0",
    "@uidotdev/usehooks": "^2.1.1",
    "animate.css": "^4.1.1",
    "autoprefixer": "10.4.15",
    "next": "13.4.19",
    "postcss": "8.4.28",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.10.1",
    "swiper": "^10.2.0",
    "swr": "^2.2.2",
    "tailwindcss": "3.3.3"
  },
  "devDependencies": {
    "@types/node": "^20.5.9",
    "@types/react": "^18.2.21",
    "@types/react-dom": "^18.2.7",
    "prisma": "^5.2.0",
    "ts-node": "^10.9.1",
    "typescript": "^5.2.2"
  }
}

错误截图 #

解决方案 #

问题根源 #

你当前使用的是Pages Router，但在组件顶部添加"use server"是Next.js App Router中标记Server Components或Server Actions的写法，Pages Router不支持这种用法，导致Webpack尝试加载App Router专用的react-server-dom-webpack/client.edge模块，从而出现找不到模块的错误。

另外你代码里的isServer判断逻辑写反了：typeof window !== "undefined"时是客户端，服务端环境中window对象不存在，正确判断应为typeof window === "undefined"。

方案1：迁移到App Router使用Server Components #

如果确实需要使用Server Components，需迁移到Next.js的App Router（13+版本支持）：

1. 项目根目录创建app文件夹，按照App Router的目录结构重构页面和组件。
2. 在Server Components顶部添加"use server"，注意Server Components中不能访问window、document等浏览器专属API，需移除或用客户端组件包裹相关逻辑。

方案2：在Pages Router中正确使用Server Actions #

如果只是想使用Server Actions（而非Server Components），需调整写法：

• 移除组件顶部的"use server"，将该指令添加到具体的异步服务端函数上：

// Template.tsx
import Header from "../header/Header";
import Footer from "../footer/Footer";

type Props = {
  children: React.ReactNode;
  sliders?: React.JSX.Element;
};

// 定义Server Action函数，仅在该函数顶部添加"use server"
async function fetchServerData() {
  "use server";
  // 这里写服务端专属逻辑，比如数据库查询、API调用等
  return { data: "server-side data" };
}

const Template = ({ children = null, sliders }: Props) => {
  // 修正isServer判断逻辑
  const isServer = typeof window === "undefined";
  console.log(isServer);

  return (
    <div className="min-w-screen  min-h-screen bg-[#F8F9FA] overflow-hidden relative">
      <div
        className={` ${sliders != undefined ? "h-4.75xl" : "h-full"}    overflow-hidden`}
      >
        <Header slidersExist={sliders} />
        {sliders !== null && sliders}
      </div>
      {children}
      <Footer />
    </div>
  );
};

export default Template;

• 确保next.config.js中已开启experimental.serverActions（你当前已配置），且Next.js版本在13.4+（你的版本是13.4.19，符合要求）。

内容的提问来源于stack exchange，提问作者Thomas A