找不到模块：无法解析“react-server-dom-webpack/client.edge”

Question

我正在尝试将服务器组件与 nextJS 一起使用，但是当我想在组件中使用“使用服务器”时出现错误。

`./node_modules/next/dist/build/webpack/loaders/next-flight-loader/action-client-wrapper.js:21:37 找不到模块：无法解析“react-server-dom-webpack/client.edge”

https://nextjs.org/docs/messages/module-not-found

导入请求模块的跟踪： ./components/template/Template.tsx ./pages/index.tsx`

模板.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;

Condif 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"
  }
}

网站错误

提前感谢您的帮助！

Answer 1

我能够使用 Next.js 的新应用程序路由器解决这个问题 而不是使用普通的页面路由器 不确定是什么导致了这个问题，但这解决了我的问题，我能够构建应用程序 这是下一个 js 文档的链接，只需遵循此链接即可相应地迁移您的项目： https://nextjs.org/docs/getting-started/installation

Answer 2

我认为您正在使用页面路由，您应该迁移到应用程序路由，默认情况下所有组件都在服务器端渲染，这里是文档：https://nextjs.org/docs