How to fix "Error: Unsupported Server Component type: Module" while deploying on vercel

Question

I was deploying my project on vercel which had frontend and backend seperated. I encountered an error named Error: Unsupported Server Component type: Module

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

I dont know why i am getting this error. /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>
  );
};

and i am importing useSocket and SocketProvider both in different routes pages.

I tried to use "use client" in layout.js which was stupidious still i tried and then even i exported like export defaut (useSocket , SocketProider) but nothing worked.

Answer 1

Your export syntax is faulty since pages and layouts expect a default export. In your example above there is no default export for the page, hence the error you are facing. It should be like this instead:

"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>
  );
};

Also, you probably should extract the SocketProvider component from the page into its own file so you do not need to convert the whole page to a client component.