TypeError: Cannot read properties of undefined (reading 'current')

[RomanFausek]

Is there an existing issue for this?

• I have searched the existing issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Question

Hello,

I'm using next-urql, which has ssr-prepass built in. After upgrading to React 19 and Next.js 15, I'm encountering an issue. According to an urql maintainer, this seems to be related to your library. Could you provide guidance on resolving this?

Thank you!

urql-graphql/urql#3732 (reply in thread)

Edit 1:
I tried some dummy examples on the latest react and next packages and I am still getting the same error

if (typeof window === 'undefined') {
    // some dummy element (div) to run prepass on
    const element = createElement('div');

    await ssrPrepass(element);
  }

[RomanFausek]

I understand this is a new issue, but could this get some attention, please? It could be a blocker for many users looking to upgrade. 🙏

I will try to bump you @carbonrobot since you did the React 19 support

[dardourimohamed]

@RomanFausek I made a little inspection on the source code and it's due to using react internal features, exactly here:

react-ssr-prepass/src/visitor.js

Line 75 in e48a778

(React: any).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED ||

react team warned to never use this on production and now in react 19 they removed ReactCurrentDispatcher from the internals which react-ssr-prepass heavily depends on it

[RomanFausek]

Yeah, I get it. The sad part is that our entire codebase was originally built around it by the devs before me. I went ahead and did the necessary refactor

[badtant]

Any updates on this?
I'm trying to update to react 19 in a next js pages router project.

[RomanFausek]

@badtant, I have to disappoint you, but it is not possible. If you think about it, this library is trying to turn the NextJS pages router to app router. The only solution that worked for me was removing this library = big refactor. But the code is now cleaner, and the app is much faster

[badtant]

ok, so i'm currently using next-urql which uses react-ssr-prepass.
was that your case also or something else?

[RomanFausek]

Oh, we still use next-urql but only the initUrqlClient function. And it works with nextjs 15 & react 19

[RomanFausek]

Just set canEnableSuspense to false.

* As long as `canEnableSuspense` is set to `true`, it enables React Suspense
 * mode on the server-side for `react-ssr-prepass`.

[badtant]

Hmm, do I understand this correctly?

In _app.tsx I have an urql Provider where I pass a store created with initUrqlClient. The client has an ssrExchange and canEnableSuspense is set to false.

I'm not getting any errors but the server doesn't wait for my urql queries to finish. How did you achieve that?

[RomanFausek]

It is kinda hard to explain, but we don't have a wrapper in _app.tsx now.

Instead, we have created a custom function to wrap each page where SSR should be (SSR opt-in).

export const getServerSideProps = getServerSidePropsWrapper(() => async context => {
  return initServerSideProps({
    context,
  });
});

And the initServerSideProps has something like this inside:

const currentSsrCache = ssrExchange({ isClient: false });
const currentClient =
    createClient({
      ssrExchange: currentSsrCache,
      context,
    });

await currentClient.query(....) // possibly promise.all if you need more

return {
    props: {
      urqlState: JSON.parse(JSON.stringify(currentSsrCache.extractData())),
    },
  };

In _app.tsx you just have a context that handles the state passed in from SSR

export const UrqlWrapper = ({ children, urqlState }: UrqlWrapperProps) => {
  const client = useMemo(() => {
    if (!ssrExchange || typeof window === 'undefined') {
      ssrExchange = createSsrExchange({
        initialState: urqlState,
        isClient: typeof window !== 'undefined',
      });
    } else {
      ssrExchange.restoreData(urqlState);
    }

    return createClient({ ssrExchange, context: undefined });
  }, [urqlState]);

  return <Provider value={client}>{children}</Provider>;
};

edit:

oh and the createClient is just a custom function for the next-urql, basically:

return initUrqlClient(
    {
      url: endpoint,
      fetchOptions: urqlFetchOptions,
      requestPolicy: 'cache-and-network',
      exchanges: urqlExchanges(ssrExchange, context),
    },
    false
  );