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

[TheoMer]

Bug report

Describe the bug

WebSocket connection continually fails. What is the issue here?

Stack

getClient
C:/Users/d0475/Documents/Projects/flamingo-ecom2/sick-fits/frontend/node_modules/next-with-apollo/lib/apollo.js:25:18
initApollo [as default]
C:/Users/d0475/Documents/Projects/flamingo-ecom2/sick-fits/frontend/node_modules/next-with-apollo/lib/apollo.js:12:16
(anonymous function)
C:\Users\d0475\Documents\Projects\flamingo-ecom2\sick-fits\frontend\node_modules\next-with-apollo\lib\withApollo.js:109:54
step
C:/Users/d0475/Documents/Projects/flamingo-ecom2/sick-fits/frontend/node_modules/next-with-apollo/lib/withApollo.js:56:23
next
C:/Users/d0475/Documents/Projects/flamingo-ecom2/sick-fits/frontend/node_modules/next-with-apollo/lib/withApollo.js:37:53
(anonymous function)
C:\Users\d0475\Documents\Projects\flamingo-ecom2\sick-fits\frontend\node_modules\next-with-apollo\lib\withApollo.js:31:71
__awaiter
C:/Users/d0475/Documents/Projects/flamingo-ecom2/sick-fits/frontend/node_modules/next-with-apollo/lib/withApollo.js:27:12
Function._a.getInitialProps
C:/Users/d0475/Documents/Projects/flamingo-ecom2/sick-fits/frontend/node_modules/next-with-apollo/lib/withApollo.js:102:61
loadGetInitialProps
C:/Users/d0475/Documents/Projects/flamingo-ecom2/sick-fits/frontend/node_modules/next-server/dist/lib/utils.js:50:35
renderToHTML
C:/Users/d0475/Documents/Projects/flamingo-ecom2/sick-fits/frontend/node_modules/next-server/dist/server/render.js:178:33
process._tickCallback
internal/process/next_tick.js:68:7

Error: Unable to find native implementation, or alternative implementation for WebSocket!
    at new SubscriptionClient (C:\Users\d0475\Documents\Projects\flamingo-ecom2\sick-fits\frontend\node_modules\subscriptions-transport-ws\dist\client.js:63:19)
    at new WebSocketLink (C:\Users\d0475\Documents\Projects\flamingo-ecom2\sick-fits\frontend\node_modules\@apollo\link-ws\lib\webSocketLink.js:14:40)
    at createClient (C:\Users\d0475\Documents\Projects\flamingo-ecom2\sick-fits\frontend\.next\server\static\development\pages\_app.js:4306:18)
    at getClient (C:\Users\d0475\Documents\Projects\flamingo-ecom2\sick-fits\frontend\node_modules\next-with-apollo\lib\apollo.js:25:18)
    at Object.initApollo [as default] (C:\Users\d0475\Documents\Projects\flamingo-ecom2\sick-fits\frontend\node_modules\next-with-apollo\lib\apollo.js:12:16)
    at C:\Users\d0475\Documents\Projects\flamingo-ecom2\sick-fits\frontend\node_modules\next-with-apollo\lib\withApollo.js:109:54
    at step (C:\Users\d0475\Documents\Projects\flamingo-ecom2\sick-fits\frontend\node_modules\next-with-apollo\lib\withApollo.js:56:23)
    at Object.next (C:\Users\d0475\Documents\Projects\flamingo-ecom2\sick-fits\frontend\node_modules\next-with-apollo\lib\withApollo.js:37:53)
    at C:\Users\d0475\Documents\Projects\flamingo-ecom2\sick-fits\frontend\node_modules\next-with-apollo\lib\withApollo.js:31:71
    at new Promise (<anonymous>)
    at __awaiter (C:\Users\d0475\Documents\Projects\flamingo-ecom2\sick-fits\frontend\node_modules\next-with-apollo\lib\withApollo.js:27:12)
    at Function._a.getInitialProps (C:\Users\d0475\Documents\Projects\flamingo-ecom2\sick-fits\frontend\node_modules\next-with-apollo\lib\withApollo.js:102:61)
    at Object.loadGetInitialProps (C:\Users\d0475\Documents\Projects\flamingo-ecom2\sick-fits\frontend\node_modules\next-server\dist\lib\utils.js:50:35)
    at Object.renderToHTML (C:\Users\d0475\Documents\Projects\flamingo-ecom2\sick-fits\frontend\node_modules\next-server\dist\server\render.js:178:33)

To Reproduce

function createClient({ headers, initialState }) {
  console.log('initialState');
  console.log(initialState);

  // Create an http link:
  const httpLink = new createHttpLink({
    uri: process.env.NODE_ENV === 'development' ? endpoint : prodEndpoint,
    fetchOptions: {
      credentials: 'include',
      //mode: 'cors',
    },
    // pass the headers along from this request. This enables SSR with logged in state
    headers,
  });

  // Create a WebSocket link:
  const wsLink = new WebSocketLink({
    uri: process.env.NODE_ENV === 'development' ? endpointWS : prodEndpointWS,
    options: {
      reconnect: true
    },
  });

  const link = process.window ? split(
    // split based on operation type
    ({ query }) => {
      const definition = getMainDefinition(query);
      return (
        definition.kind === 'OperationDefinition' &&
        definition.operation === 'subscription'
      );
    },
    wsLink,
    httpLink,
  ) : httpLink;

  const cache = new InMemoryCache({
    dataIdFromObject: o => o.id,
  }).restore(initialState || {});

  const client_ = new ApolloClient({
    link: ApolloLink.from([
      onError(({ graphQLErrors, networkError }) => {
        if (graphQLErrors)
          graphQLErrors.forEach(({ message, locations, path }) =>
            console.log(
              `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
            )
          );
        if (networkError)
          console.log(
            `[Network error]: ${networkError}. Backend is unreachable. Is it running?`
          );
      }),
      link,
    ]),
    cache,
    assumeImmutableResults: true,
    ...
  })

  const data = {
    cartOpen: false,
    items: [
      {
        ...
      }]
  };

  cache.writeData({ data });

  client_.onResetStore(() => cache.writeData({ data }));

  return client_;
}

Expected behavior

A successful connection to the Apollo server was expected

System information

• OS: Windows 10 Pro
• Version of Next.js: 9.0.0
• @apollo/client: 3.0.0-beta.30,
• @apollo/link-error: 2.0.0-beta.3,
  -@apollo/link-ws: 2.0.0-beta.3,
  -@apollo/react-ssr: 3.1.3",