Cannot read property 'WebSocket' of undefined

[soyjuanmedina]

Note: for support questions, please use one of these channels: stackoverflow or slack

You want to:

• report a bug
• request a feature

Current behaviour

After update my Angular App to Angular 8 I can npm start and npm build, but when I upoload to the server the console of the browser yield
Cannot read property 'WebSocket' of undefined

Other information (e.g. stacktraces, related issues, suggestions how to fix)

I really don't know if the issue is for this library, but I read the problem is about the
global.WebSocket || global.MozWebSocket;
webpack/webpack-dev-server#174 (comment)
in some libraries and I use yours

[soyjuanmedina]

I really don't know who is guilty, but I supousse it's not your (but I can't delete the issue).

I solve it changing compilerOptions in tsconfig.json from 'es2015' to 'es5'

Thanks and sorry if not your fault.

[MickL]

I have the same problem when using target es2015 in tsconfig.

I wonder why this error occurs because it is an important new feature of Angular 8 to compile modern js AND older js seperate if defined in browserlist. But only if you set to es2015 so it should not be changed back to es5.

[MickL]

@soyjuanmedina Could you please reopen?

[NicolasKritter]

@MickL

I think the more correct way to get window is Function('return this')() instead. The content in Function constructor is non-strict regardless of the environment it is created in.

Originally posted by @andy0130tw in webpack/webpack-dev-server#174 (comment)

I had this problem after an upgrade to angular 8.1 and it works perfectly after doing what he suggested.
I made a small patch.js to run after npm install in my package.json

const { readFileSync, writeFileSync,existsSync } = require('fs');
const patchIdentifier = '//-patched';

const fileToPatch = './node_modules/websocket/lib/browser.js';
const codeToPatch= 'var _global = (function() { return this; })();';
const patchCode = "var _global = Function('return this')();" + patchIdentifier;

function doPatch(fileName,sourceCode) {
  if (!existsSync(fileName)) {
    console.log('file not found '+fileName)
    process.exit(0);
  }
  const contents = readFileSync(fileName).toString().split('\n');
  // Check if code has been patched already
  const hasBeenPatched = contents.find(line => line.indexOf(patchIdentifier) !== -1);
  
  if (!hasBeenPatched) {
    const lineNumber = contents.findIndex(line => line.indexOf(sourceCode) !== -1);
    if (lineNumber < 0) {
      console.error('Could not find source code. Please check ' + fileName + ' and update the patch accordingly');
      process.exit(1);
    }
    // replace the line
    contents.splice(lineNumber, 1, patchCode);
    const updatedContents = contents.join('\n');
    writeFileSync(fileName, updatedContents);

    console.log('websocket browser.js has been Monkey patched');
  } else {
    console.log('websocket browser.js has already been patched');
  }
}
doPatch(fileToPatch,codeToPatch);
process.exit(0);

PS: with this solution, I could keep the es2015 in my tsconfig

[loveneetabsolvetech]

Just need to update your opentok.js file as per screenshot

[MickL]

@loveneetabsolvetech Could you create a pull request? Or maybe someone of the contributors could fix this issue?

[darrachequesne]

I think this should be fixed by socketio/engine.io-client@357f01d (included in 3.4.1).

[Chingshangkhomba]

Just need to update your opentok.js file as per screenshot

this works