Websocket error: Unable to find native implementation, or alternative implementation for WebSocket!

Help
1

I have been tasked at fixing the Websocket connection on our NextJS app. However, I am running into the dreaded error

Error: Unable to find native implementation, or alternative implementation for WebSocket!

I followed the docs on subscriptions and made sure all my packages are updated, but still see

Error: Unable to find native implementation, or alternative implementation for WebSocket!
    at new SubscriptionClient (/Users/plucks-fluid/dev/vapor/node_modules/subscriptions-transport-ws/dist/client.js:75:19)
    at new WebSocketLink (/Users/plucks-fluid/dev/vapor/node_modules/@apollo/client/link/ws/ws.cjs:17:40)
    at createApolloClient (webpack-internal:///./apollo/useApollo.ts:56:18)

My implementation requires access to the cookie to pass authorization, so i am passing props from getInitialProps to the App and then to the Apollo “creation” function.

function MyApp(props) {
  const { Component, plasma2Token } = props;
  debugger;
  const client = useApollo({ plasma2Token });

  return (
      <ApolloProvider client={client}>
        {children}
      </ApolloProvider>
  );
}

MyApp.getInitialProps = async ({ Component, ctx }) => {
  let pageProps = {};
  if (Component.getInitialProps) {
    pageProps = await Component.getInitialProps(ctx);
  }
  const { cookie } = ctx?.req?.headers || {};
  let plasma2Token = '';
  if (cookie) {
    try {
      plasma2Token = Cookie.parse(cookie)['auth-token-plasma2'];
    } catch (e) {
      console.error('Unable to parse requested cookie', e.message);
    }
  }
  pageProps.plasma2Token = plasma2Token;

  return { ...pageProps };
};

My Client generation code I found here since it seems to handle the Vercel build on server.

et apolloClient: ApolloClient<NormalizedCacheObject> | null = null;
const isBrowser = typeof window === 'undefined';

const createApolloClient = (
  plasma2Token: string
): ApolloClient<NormalizedCacheObject> => {
  const httpLink = new HttpLink({
    uri: process.env.HTTP_LINK_URL,
  });

  const authMiddlewareLink = new ApolloLink((operation, forward) => {
    operation.setContext({
      headers: {
        Authorization: `Bearer ${plasma2Token}` || null,
      },
    });

    return forward(operation);
  });

  const wsLink = new WebSocketLink({
    uri: process.env.WS_LINK_URL || '',
    options: {
      reconnect: true,
    },
  });

  const splitLink = split(
    ({ query }) => {
      const definition = getMainDefinition(query);
      return (
        definition.kind === 'OperationDefinition' &&
        definition.operation === 'subscription'
      );
    },
    wsLink,
    httpLink
  );

  return new ApolloClient({
    ssrMode: isBrowser,
    link: concat(authMiddlewareLink, splitLink),
    cache: new InMemoryCache(),
  });
};

export function initializeApollo(
  plasma2Token: string
): ApolloClient<NormalizedCacheObject> {
  debugger;
  const client = apolloClient ?? createApolloClient(plasma2Token);

  // For SSG and SSR always create a new Apollo Client
  if (isBrowser) {
    return client;
  }

  // Create the Apollo Client once in the client
  if (!apolloClient) {
    apolloClient = client;
  }

  return client;
}

export function useApollo({
  plasma2Token,
}: PageProps): ApolloClient<NormalizedCacheObject> {
  const store = useMemo(() => initializeApollo(plasma2Token), [plasma2Token]);

  return store;
}

I cannot tell what is wrong…I have tried swapping the WS package from apollo-link-ws and @apollo/client/link/ws and back and forth.

I’ll try to get a Sandbox too, but does anything look incorrect?

2

Can you solve that error? I am getting the error. Have you faced this dreaded error? Please tell me this error is stopping my work a lot.

Regard