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

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.

[lewebsimple]

This works just fine :

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

[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 https://github.com/vitejs/vite/issues/720.