Next.js Discord

Discord Forum

Internal error: ReferenceError: window is not defined. With runtime edge.

Answered
Pražský Krysařík posted this in #help-forum
Open in Discord
Pražský KrysaříkOP
Good day! Community.
I am facing this error window is not defined errors after using runtime edge.
before I use export const runtime = "edge"; in my router, it was working well.
but to deploy in cloudflare , I used the runtime edge. after then getting this issue.
This is Apollo Client Wrapper to use use useSuspenseQuery.
"use client";

import { ApolloLink, HttpLink } from "@apollo/client";
import {
  NextSSRApolloClient,
  ApolloNextAppProvider,
  NextSSRInMemoryCache,
  SSRMultipartLink,
} from "@apollo/experimental-nextjs-app-support/ssr";

const SERVER = ...;
const AccessToken = ...;

function makeClient() {
  const httpLink = new HttpLink({
    uri: SERVER,
    headers: {
      authorization: `Bearer ${AccessToken}`,
    },
  });

  return new NextSSRApolloClient({
    cache: new NextSSRInMemoryCache(),
    link:
      typeof window === "undefined"
        ? ApolloLink.from([
            new SSRMultipartLink({
              stripDefer: true,
            }),
            httpLink,
          ])
        : httpLink,
  });
}

export function ApolloWrapper({ children }: React.PropsWithChildren) {
  return (
    <ApolloNextAppProvider makeClient={makeClient}>
      {children}
    </ApolloNextAppProvider>
  );
}

Please help me, Community!
Answered by Pražský Krysařík
I solved after changing this code 
export function ApolloWrapper({ children }: React.PropsWithChildren) {
  if (typeof window !== "undefined") {
    return (
      <ApolloNextAppProvider makeClient={makeClient}>
        {children}
      </ApolloNextAppProvider>
    );
  }
  return <>{children}</>;
}
View full answer

9 Replies

And use dynamic to csr this component
Pražský KrysaříkOP
I did as you said, but still issues is causing
it was working but after I used export const runtime = "edge"; in my dynamic router page, I am getting the window is not defined issue
Pražský KrysaříkOP
I solved after changing this code 
export function ApolloWrapper({ children }: React.PropsWithChildren) {
  if (typeof window !== "undefined") {
    return (
      <ApolloNextAppProvider makeClient={makeClient}>
        {children}
      </ApolloNextAppProvider>
    );
  }
  return <>{children}</>;
}
Answer
Pražský KrysaříkOP
Thanks @Anay-208