在 vercel 上部署时如何修复“错误：不支持的服务器组件类型：模块”

Question

我正在 vercel 上部署我的项目，前端和后端是分开的。我遇到了一个名为 错误：不支持的服务器组件类型：模块

at we (/vercel/path0/SusText/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:1:263454)
    at /vercel/path0/SusText/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:1:273539
    at Array.toJSON (/vercel/path0/SusText/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:1:276836)
    at stringify (<anonymous>)
    at Oe (/vercel/path0/SusText/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:1:265286)
    at Me (/vercel/path0/SusText/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:1:265817)
    at Timeout._onTimeout (/vercel/path0/SusText/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:1:263635)
    at listOnTimeout (node:internal/timers:569:17)
    at process.processTimers (node:internal/timers:512:7)
Error occurred prerendering page "/context". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Unsupported Server Component type: Module

我不知道为什么会出现此错误。

/context/page.js

"use client"
import React, { createContext, useMemo, useContext } from "react";
import { io } from "socket.io-client";

const SocketContext = createContext(null);

export const useSocket = () => {
  const socket = useContext(SocketContext);
  return socket;
};

export const SocketProvider = (props) => {
  const socket = useMemo(() => io("localhost:8000"), []); //socket doesnt get initialized each time

  return (
    <SocketContext.Provider value={socket}>
      {props.children}
    </SocketContext.Provider>
  );
};

我正在不同的路由页面中导入 useSocket 和 SocketProvider 。

我尝试在layout.js中使用

"use client"

，这很愚蠢，我仍然尝试过，然后甚至我导出了

export defaut (useSocket , SocketProider)

但没有任何效果。

Answer 1

您的导出语法有错误。在上面的示例中，页面没有默认导出，因此您面临错误。应该是这样的：

"use client"

import { io } from "socket.io-client";
import React, { createContext, useMemo, useContext } from "react";

const SocketContext = createContext(null);

export const useSocket = () => {
  const socket = useContext(SocketContext);
  return socket;
};

// context/page.js
export default function SocketProvider(props) {
  const [socket, setSocket] = useState(null);

  // use an effect instead of use memo
  useEffect(() => {
    setSocket(io("localhost:8000"));
  }, []);

  return (
    <SocketContext.Provider value={socket}>
      {props.children}
    </SocketContext.Provider>
  );
};

此外，您可能应该将页面中的

SocketProvider

组件提取到其自己的文件中，这样您就不需要将整个页面转换为客户端组件。