Library fails with missing global declarations when run inside nodejs (ES6)

[lukebayes]

I'm attempting to run a Webrtc client within browsers and nodejs.

The browser build seems to work well. The nodejs (ES6 modules) side is having some problems.

Here is some sample code that triggers the first error from nodejs (in a file named, demo.js).

import {WebrtcProvider} from 'y-webrtc';
import * as Y from 'yjs';

const id = 1;
const config = {
  signaling: ['ws://localhost:4444'],
  maxConns: 50 + Math.floor(Math.random() * 15),
  peerOpts: {},
};

const doc = new Y.Doc();
const webrtc = new WebrtcProvider(id, doc, config);

Running this with node demo.js fails with the following error:

file:///[proj]/node_modules/lib0/websocket.js:25
    const websocket = new WebSocket(wsclient.url)
                      ^

ReferenceError: WebSocket is not defined
    at setupWS (file:///[proj]/node_modules/lib0/websocket.js:25:23)
    at new WebsocketClient (file:///[proj]/node_modules/lib0/websocket.js:122:5)
    at new SignalingConn (file:///[[proj]/node_modules/y-webrtc/src/y-webrtc.js:473:5)
    at file:///[proj]/node_modules/y-webrtc/src/y-webrtc.js:610:75
    at Module.setIfUndefined (file:///[proj]/node_modules/lib0/map.js:49:24)
    at file:///[proj]/node_modules/y-webrtc/src/y-webrtc.js:610:33
    at Array.forEach (<anonymous>)
    at WebrtcProvider.connect (file:///[proj]/node_modules/y-webrtc/src/y-webrtc.js:609:24)
    at new WebrtcProvider (file:///[proj]/node_modules/y-webrtc/src/y-webrtc.js:595:10)
    at file:///proj]/demo.js:19:16

I was able to work around this issue by adding the following to the top of my application entry point (above any imports).

import WebSocket from 'ws';
Object.assign(global, {WebSocket});

This allows the service to start, but whenever a connection is made from a separate browser client, the following error is thrown:

Exit with: Error: Secure random number generation is not supported by this browser.
Use Chrome, Firefox or Internet Explorer 11
    at t.exports (/[proj]/node_modules/simple-peer/simplepeer.min.js:6:37193)
    at new p (/[proj]/node_modules/simple-peer/simplepeer.min.js:6:79527)
    at new WebrtcConn (file:///[proj]/node_modules/y-webrtc/src/y-webrtc.js:183:17)
    at file:///[proj]/teak/node_modules/y-webrtc/src/y-webrtc.js:513:68
    at Module.setIfUndefined (file:///proj]/node_modules/lib0/map.js:49:24)
    at execMessage (file:///[proj]/node_modules/y-webrtc/src/y-webrtc.js:513:23)
    at file:///[proj]/node_modules/y-webrtc/src/y-webrtc.js:530:13
    at file:///[proj]/node_modules/lib0/observable.js:73:90
    at Array.forEach (<anonymous>)
    at SignalingConn.emit (file:///[proj]/node_modules/lib0/observable.js:73:77)

After digging a little bit, it looks like y-webrtc is loading a pre-minified build of simple-peer that may have been built for the browser and not nodejs.

I was unable to get a similar global hack working for this issue, and instead forked the y-webrtc repo into a vendor folder, loaded as a git submodule and referred to that version from my node application and the npm published version from my browser client code.

I also had to add the following to my imports and update the peerOpts object:

import wrtc from 'wrtc';

const config = {
  signaling: ['ws://localhost:4444'],
  maxConns: 50 + Math.floor(Math.random() * 15),
  peerOpts: {
    wrtc,
  },
};

Unfortunately, wrtc requires node-pre-gyp and node-gyp, which seem to be in a weird state at the moment, so I had to install those both globally, delete my node_modules folder and reinstall local modules in order to get the thing to work.

Expected behavior
The library should work for either node or browser clients

Environment Information

• node --version: v16.14.2
• Node in ES6 module mode (e.g., package.json includes "type": "module" entry).
• uname -a: Linux beefcake 5.13.0-39-generic #44~20.04.1-Ubuntu SMP Thu Mar 24 16:43:35 UTC 2022 x86_64 x86_64 x86_64 GNU/Linux
• y-webrtc: 10.2.3

$ npm ls yjs
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]

Additional context
FWIW, here's the commit that worked around the issue.

FWIW 2, I also tried pointing into the unminified build of simple-peer, but that did not want to build successfully for the browser (under esbuild with es6 modules) as there were nodejs modules being required in that dependency.

I understand that these issues probably aren't going to be trivial to solve from y-webrtc, so thought I'd post here in case others have the same problems, at least we can discuss workarounds.

[dmonad]

Hi @lukebayes ,

It would be possible to provide two different bundles in y-webrtc: one for the browser and one for node. These separate bundles could be exported using conditional imports like I'm doing in isomorphic.js, for example.

I can't import the main import from simple-peer, because it can only be bundled with browserify (and probably some esoteric webpack configuration).

The y-webrtc node bundle should import the main import, the y-webrtc browser import should continue importing the pre-bundled version.

I'm sorry, but this is not a high priority for me. I'll leave this ticket open and will accept a PR that implements what I described above.

[lukebayes]

Hey @dmonad,

Thanks for the response.

I definitely understand how difficult it can be to get work like this into the top of a priority queue. No problem here.

My main hope is to get a place online where anyone else bumping into these issues may find a workaround.

I'd like to see if I can't get simple-peer to build more appropriately across their supported environments.

I believe that would remove some (nearly all) of the work that showed up here.

Thanks!

[omawhite]

I also ran into this issue while trying to set up this library in a next.js project. For anyone running into this issue, make sure your code containing the WebrtcProvider is only running on the client side.

[asmodehn]

Hi, just a quick note that I ran into this while (loosely) following https://syncedstore.org/docs/svelte/ to setup y-webrtc in my svelte app with syncedstore.

When I ll find some time, I'll try to dig a bit deeper, and post updated information if I find any.

[needs]

I also ran into this issue while trying to set up this library in a next.js project. For anyone running into this issue, make sure your code containing the WebrtcProvider is only running on the client side.

This works on my side:

store.ts

export const store = syncedStore<Store>({ ... });

export function initStore() {
  const doc = getYjsDoc(store);
  const webrtcProvider = new WebrtcProvider("my-room", doc)
  return () => {
    webrtcProvider.destroy();
  }
}

_app.tsx

function CustomApp() {
  useEffect(() => {
    if (typeof window !== "undefined") {
      return initStore();
    }
  }, []);

  return (
      ...
  );
}