Rollup and Apollo websocket with subscriptions-transport-ws

Question

I'm trying to use:

• Svelte (https://github.com/sveltejs/template) and
• Svelte-Apollo (https://github.com/timhall/svelte-apollo).

Using Rollup (https://github.com/sveltejs/template/blob/master/rollup.config.js) for the final bundle when compiling (npm run build) I got this error:

Error: "Subcription is not exported by node_modules/subscriptions-transport-ws/dist/index.js"

So I thought of solving with (https://github.com/rollup/rollup-plugin-commonjs#custom-named-exports):

commonjs({
    namedExports: {
        './node_modules/subscriptions-transport-ws/dist/index.js': ['SubscriptionClient']
    }
}),

Now Rollup says:

index.js → public/bundle.js...

(!) Mixing named and default exports
Consumers of your bundle will have to use bundle['default'] to access the default export, which may not be what you want. Use `output.exports: 'named'` to disable this warning

(!) Missing shims for Node.js built-ins
Creating a browser bundle that depends on 'events', 'https', 'http', 'url', 'zlib' and 'stream'. You might need to include https://www.npmjs.com/package/rollup-plugin-node-builtins

(!) Unresolved dependencies
https://rollupjs.org/guide/en#warning-treating-module-as-external-dependency
events (imported by node_modules\ws\lib\websocket.js, node_modules\ws\lib\websocket-server.js,  commonjs-external-events)
crypto (imported by node_modules\ws\lib\websocket.js, node_modules\ws\lib\websocket-server.js, node_modules\ws\lib\sender.js,  commonjs-external-crypto)
https (imported by node_modules\ws\lib\websocket.js,  commonjs-external-https)
net (imported by node_modules\ws\lib\websocket.js,  commonjs-external-net)
http (imported by node_modules\ws\lib\websocket.js, node_modules\ws\lib\websocket-server.js,  commonjs-external-http)
tls (imported by node_modules\ws\lib\websocket.js,  commonjs-external-tls)
url (imported by node_modules\ws\lib\websocket.js, node_modules\ws\lib\websocket-server.js,  commonjs-external-url)
stream (imported by node_modules\ws\lib\receiver.js,  commonjs-external-stream)
zlib (imported by node_modules\ws\lib\permessage-deflate.js,  commonjs-external-zlib)
bufferutil (imported by node_modules\ws\lib\buffer-util.js,  commonjs-external-bufferutil)
utf-8-validate (imported by node_modules\ws\lib\validation.js,  commonjs-external-utf-8-validate)
(!) Missing global variable names
Use output.globals to specify browser global variable names corresponding to external modules
events (guessing 'events')
crypto (guessing 'crypto')
https (guessing 'https')
http (guessing 'http')
net (guessing 'net')
tls (guessing 'tls')
url (guessing 'url')
zlib (guessing 'zlib')
bufferutil (guessing 'bufferutil')
stream (guessing 'stream')
utf-8-validate (guessing 'utf8Validate')
created public/bundle.js in 13.8s

What a mess. I'm just using web oriented libraries, why it complains about nodejs dependencies?!

So I added these lines in rollup.config.js:

import builtins from 'rollup-plugin-node-builtins'
import globals from 'rollup-plugin-node-globals'
...
plugins: [
  globals(),
  builtins(),

and all the previous errors are gone.

But now in browser I get:

Uncaught ReferenceError: exports is not defined
    at client.js:45

It complains about this line (I think):

Object.defineProperty(exports, "__esModule", { value: true });

I'm totally lost.

I created a simple repo: https://codesandbox.io/s/zn1mnon8jl.

If you open it in codesandbox it works! Miracle! But if you download as a .zip and execute npm i && npm run dev you can see the problem.

What to do now?

Answer 1

Try adding this inline rollup plugin before the nodeResolve plugin

{
  // needed to specifically use the browser bundle for subscriptions-transport-ws
  name: 'use-browser-for-subscriptions-transport-ws',
  resolveId(id) {
    if (id === 'subscriptions-transport-ws')
      return path.resolve('node_modules/subscriptions-transport-ws/dist/client.js');
  },
},