fix: Villus Subscriptions subscriptions-transport-ws breaks Vite

[kingkong404]

Hey don't know if you have any ideas how to fix but as soon as you want to use Subscriptions in Villus you need to use subscriptions-transport-ws to set up the Websocket client although it does not play nice with Vite.

After running yarn dev in Chrome you get the following error and it crashes Vite.

Although once the project is built the error goes away and SubscriptionClient is found, so seems to be something to do with how Vite is hot loading the module.

Don't know if you know any ideas / options in the vite.config.js file we could try.

<script lang="ts">
import { SubscriptionClient } from 'subscriptions-transport-ws';
import { defineComponent, computed } from 'vue';
import { router } from './main';
import { useClient, handleSubscriptions, defaultPlugins, useMutation, createClient } from 'villus';
import { ActionTypes, MutationTypes, useStore } from './store';
import { LoginDocument } from './generated/types';

const subscriptionClient = new SubscriptionClient(
  'wss://xxxxxxxx/graphql',
  { reconnect: true }
);

const subscriptionForwarder = (operation: any) => subscriptionClient.request(operation);

export default defineComponent({
  name: 'Main',
  setup() {
    const store = useStore();

    const client = useClient({
      url: 'http://localhost:4000/graphql',
      // @ts-ignore
      use: [handleSubscriptions(subscriptionForwarder), ...defaultPlugins()],
    });

  },
});
</script>

[lewebsimple]

Haven't tried subscriptions yet.

vitejs/vite#496 and vitejs/vite#864 might have something to do with this.

[lewebsimple]

Also vitejs/vite#452 and vitejs/vite#918

[kingkong404]

Nice looks like potentially they've pushed a fix although they haven't released a new RC for 3 months :/

Hopefully we'll get something soon!

[lewebsimple]

This works:

import ws from "subscriptions-transport-ws";
const subscriptionClient = new ws.SubscriptionClient(wsEndpoint, {});

It's fixed in 0.2.0