Extension Problems with ws

[wolfv]

Lately I have created JLab widgets that use a thirdparty library that relies on ws for WebSockets.
But when I install this extension using JupyterLab, the require('ws') of this thirdparty library (in my case RosLib.js get's compiled to module.export = ws; where ws is undefined. This breaks my application and so far the only workaround I have found is to patch the library by removing var WebSocket = require('ws'); (since WebSocket is implemented in the browser this is no big deal).

@martinRenou has worked around this by doing window.ws = WebSocket in ipywebrtc:

https://github.com/maartenbreddels/ipywebrtc/blob/839d98a5a7c134f577875993368279dfce8365a0/js/src/webrtc.js#L6-L8

which for some reason does not work for me (include order basically).
I think ipyvolume (cc @maartenbreddels) was running into the same issue but there it was no issue to just remove ws.

I suspect that this PR might be the cause, as this behavior only manifested itself after the 1.0 release (afaik).
#5945

If this could be fixed somehow I would be very happy (even though I agree of course that this library is not necessary in the browser, and maybe the thirdparty libs should just do the right thing).

[jasongrout]

It does sound like that PR might be the relevant one. On the relevant issue, @saulshanabrook points out a way we work with this in services: #5856 (comment)

jupyterlab/packages/services/src/serverconnection.ts

Lines 16 to 31 in 52a3305

	if (typeof window === 'undefined') {
	// Mangle the require statements so it does not get picked up in the
	// browser assets.
	/* tslint:disable */
	let fetchMod = require('node-fetch');
	FETCH = global.fetch || fetchMod;
	REQUEST = global.Request || fetchMod.Request;
	HEADERS = global.Headers || fetchMod.Headers;
	WEBSOCKET = global.WebSocket || require('ws');
	/* tslint:enable */
	} else {
	FETCH = fetch;
	REQUEST = Request;
	HEADERS = Headers;
	WEBSOCKET = WebSocket;
	}

[wolfv]

yeah, totally, that would be great. However, I don't control the code that does require('ws') which makes this a bit more tedious otherwise I would use this fix right away!

[jasongrout]

Right - I meant that as a pattern libraries could use. I understand the dependency problem here.

[wolfv]

I have checked jupyterlab for all occurences of this pattern and it seems that only the services package sets "browser": { "ws": false ...}

However, another thirdparty library (engine.io-client) also sets this. So I am wondering – if I revert the PR doing this, will it work or will the setting of engine.io-client override this?
Also, what's the best way to test this?

I would really like if this can go into the next release because I wasted way too much time on ws being undefined.

[jasongrout]

The underlying issue that this change fixed is #5856. Can we can still solve #5856 even if we remove this field?

[bollwyvl]

Depending on how dirty you mind getting, this has worked for me in the past (./widget.ts -> yjs -> socket.io -> engine.io):

// eew
(window as any).ws = WebSocket;
// this kicks off the dep chain
const {makeWidget} = await import(/* webpackChunkName: "jupyterlab-outsource-yjs" */ './widget'); 

Not proud of it, though 🤷‍♂️

[wolfv]

I think instead of false it's also possible to put the path of a shim file. Maybe that shim file could contain the piece of code mentioned?

…

On Tue 6 Aug 2019 at 05:14, Nicholas Bollweg ***@***.***> wrote: Depending on how dirty you mind getting, this has worked for me in the past (./widget.ts -> yjs -> socket.io -> engine.io): // eew (window as any).ws = WebSocket; // this kicks off the dep chain const {makeWidget} = await import(/* webpackChunkName: "jupyterlab-outsource-yjs" */ './widget'); Not proud of it, though 🤷‍♂ — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#6934?email_source=notifications&email_token=AAGYCPXEYTEETC5DND65KPLQDDUALA5CNFSM4II6UIUKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3TWEII#issuecomment-518480417>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAGYCPRYX5UTNWWXWYEWPPDQDDUALANCNFSM4II6UIUA> .

[wolfv]

e.g.

  "browser": {
    "node-fetch": false,
    "ws": "./myWsShim.js"
  },

where myWsShim.js contains

module.exports = WebSocket;

[jasongrout]

Fixed by #7780?