Subscriptions Transport WS module not found during npm dev but fine in npm build

[kingkong404]

Do NOT ignore this template or your issue will have a very high chance to be closed without comment.

Describe the bug

Error in chrome console.
Uncaught SyntaxError: The requested module '/@modules/subscriptions-transport-ws/dist/client.js' does not provide an export named 'SubscriptionClient'

A clear and concise description of what the bug is.

During yarn dev, Vite is unable to find exports from subscriptions-transport-ws although once the project is built for production using yarn build it works fine.

Reproduction

yarn add subscriptions-transport-ws
import { SubscriptionClient } from "subscriptions-transport-ws"; into any vue file
run yarn dev
load website and go to console.

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld />
</template>

<script lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
import { SubscriptionClient } from "subscriptions-transport-ws";
import { useClient, handleSubscriptions, defaultPlugins } from "villus";

const subscriptionClient = new SubscriptionClient(
  "ws://xxxxx/graphql",
  { reconnect: true },
);

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

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  setup() {
    useClient({
      url: "https://xxxxx/graphql",
      use: [handleSubscriptions(subscriptionForwarder), ...defaultPlugins()],
    });
  },
};
</script>

A reproduction is required unless you are absolutely sure that the the problem is obvious and the information you provided is enough for us to understand what the problem is. If a report has only vague description (e.g. just a generic error message) and has no reproduction, it will be closed immediately.

System Info

• required vite version: rc4
• required Operating System: osx
• required Node version: 15
• Optional:
  • npm/yarn version
  • Installed vue version (from yarn.lock or package-lock.json)
  • Installed @vue/compiler-sfc version

Logs (Optional if provided reproduction)

1. Run vite or vite build with the --debug flag.
2. Provide the error log here.

[ais-one]

I got mine to work

https:/ais-one/vue-crud-x/tree/master/example-vite

see

• https:/ais-one/vue-crud-x/blob/master/example-vite/vite.config.js
• https:/ais-one/vue-crud-x/blob/master/example-vite/src/lib/esm/apollo.js
• https:/ais-one/vue-crud-x/blob/master/example-vite/src/App.vue (setup here)
• https:/ais-one/vue-crud-x/blob/master/example-vite/src/views/SignIn.vue (use here)

[kingkong404]

Hey @ais-one , thanks for sharing.

I'm currently using Villus not Apollo as the client and importing directly from subscriptions-transport-ws. Did you encounter this specific bug as I can't seem to find any code that address' it in the config or elsewhere.

During Vite Dev mode:

Works fine after Vite Build and deployed to server. It's just the Dev mode thats the issue.

[ais-one]

Hey @ais-one , thanks for sharing.

I'm currently using Villus not Apollo as the client and importing directly from subscriptions-transport-ws. Did you encounter this specific bug as I can't seem to find any code that address' it in the config or elsewhere.

During Vite Dev mode:

Works fine after Vite Build and deployed to server. It's just the Dev mode thats the issue.

On dev and build, I did not encounter the error with apollo...

[JerryWu1234]

can you offer complete demo in codesandbox?

[lewebsimple]

This works just fine :

import ws from "subscriptions-transport-ws";
const subscriptionClient = new ws.SubscriptionClient( /* ... */ );

[kingkong404]

can you offer complete demo in codesandbox?

I struggled with replicating Vite in codesandbox, I could only see configs for vue 3

Although in order to replicate just add these lines to the top of App.vue after creating a Vite app. + yarn add subscriptions-transport-ws

import { SubscriptionClient } from "subscriptions-transport-ws";

const subscriptionClient = new SubscriptionClient("ws://xxxxx/graphql", {
  reconnect: true,
});

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

[underfin]

The subscriptions-transport-ws is common js module.Vite only support es module by defalut, you can ask the maintainer export es module package.

Other, vite can support cjs with optimizer and you can use it as @lewebsimple said. For cjs named importer, you can track here #720.