Socket.io-client: [bug] global is not defined

Created on 24 Oct 2017  ·  49Comments  ·  Source: socketio/socket.io-client

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

You want to:

- [x] report a *bug*
- [ ] request a *feature*

Current behaviour

socket.io-client doesn't work with @angular/[email protected] because of a dependency on node.js' global var
(seems to come from [email protected], but I can't find who maintains that versions)

Steps to reproduce (if the current behaviour is a bug)

see https://github.com/angular/angular-cli/issues/8160

Expected behaviour

Setup

  • OS:
  • browser:
  • socket.io version: 2.0.4

Most helpful comment

According to https://github.com/angular/angular-cli/issues/8160#issuecomment-386153833:

adding the following polyfills.ts should work in Angular@6:

// Add global to window, assigning the value of window itself.
(window as any).global = window;

In any case, this issue should not be resolved IMO, socket.io-client should either remove the implicit dependency on global, or document that a polyfill is needed (by anyone using the pre-bundled sources, not just Angular users)

(BTW where are the sources for latest [email protected]? maybe I could help)

All 49 comments

Also facing this issue currently

Since https://github.com/angular/angular-cli/issues/8160 is now resolved, can we close this issue? Thanks!

I don't think so, because in the angular/cli > 6 they permanently removed global.
Can you please start looking intoit again? https://github.com/angular/angular-cli/issues/9827

BR,
Kevin

A workaround until Angular CLI maybe fixes it or make it possible to override the node command, then you can add the socket.io-client slim file in the paths section of the tsconfig.app.json

"paths": {
      ....
      "socket.io-client": ["../node_modules/socket.io-client/dist/socket.io.slim.js"]
}

Even if it does currently work, according to https://github.com/angular/angular-cli/issues/9827#issuecomment-369578814, this will be an issue in Angular@6:

"[this] just generally make for a situation where browser code that shouldn't work at all works only when built in with very specific tooling. This is not a good situation. "

I confirm it's broken in Angular 6 RC5. Does anybody know a workaround?

@ngervasi we have done it by doing like i commented here: https://github.com/socketio/socket.io-client/issues/1166#issuecomment-379225639

I tried:

{ "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app", "module": "es2015", "baseUrl": "", "types": [] }, "exclude": [ "test.ts", "**/*.spec.ts" ], "paths": { "socket.io-client": ["../node_modules/socket.io-client/dist/socket.io.slim.js"] } }

but it's not working in Angular 6RC5, I still get the error:

is-buffer.js:4 Uncaught ReferenceError: global is not defined at Object../node_modules/socket.io-client/node_modules/socket.io-parser/is-buffer.js (is-buffer.js:4) at __webpack_require__ (bootstrap:74) at Object../node_modules/socket.io-client/node_modules/socket.io-parser/binary.js (binary.js:8) at __webpack_require__ (bootstrap:74) at Object../node_modules/socket.io-client/node_modules/socket.io-parser/index.js (index.js:8) at __webpack_require__ (bootstrap:74) at Object../node_modules/socket.io-client/lib/index.js (index.js:7) at __webpack_require__ (bootstrap:74) at Object../src/app/_services/websocket.service.ts (log.service.ts:5) at __webpack_require__ (bootstrap:74)

According to https://github.com/angular/angular-cli/issues/8160#issuecomment-386153833:

adding the following polyfills.ts should work in Angular@6:

// Add global to window, assigning the value of window itself.
(window as any).global = window;

In any case, this issue should not be resolved IMO, socket.io-client should either remove the implicit dependency on global, or document that a polyfill is needed (by anyone using the pre-bundled sources, not just Angular users)

(BTW where are the sources for latest [email protected]? maybe I could help)

Which is the better fix? https://github.com/socketio/socket.io-client/issues/1166#issuecomment-379225639 (adding to paths in tsconfig) or https://github.com/socketio/socket.io-client/issues/1166#issuecomment-386195105 (assigning to global)?

Both options worked for me in Angular v6 project generated with Angular CLI.

@amitport the sources for the has-binary2 package are here: https://github.com/darrachequesne/has-binary

Though I'm afraid it's not the sole occurence.

@darrenmothersele don't think there is exactly one "better". Adding 'global' may have side effects for other libs while adding the 'slim' file may have a negative effect on bundle size (not necessarily)

@darrachequesne added a PR https://github.com/darrachequesne/has-binary/pull/4 (it's a start :))

I tried both solutions and with a current angular 6.0.0 project and none works. I added the paths entry to the tsconfig.app.json and the entry to polyfills.ts but still getting the same error in chrome.

same here, the tsconfig solution does not work on ng cli 6

// Add global to window, assigning the value of window itself.
(window as any).global = window;

is working for me
Thanks.

Works for me, too! Thanks!

It works for me too ! Thanks a lot ! :D

where did you put (window as any).global = window; ?
Thanks.

Hello,

Just right there (on the picture).

2018-05-17 21:07 GMT+02:00 Alberto Basaglia notifications@github.com:

where did you put (window as any).global = window; ?
Thanks.


You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/socketio/socket.io-client/issues/1166#issuecomment-389975067,
or mute the thread
https://github.com/notifications/unsubscribe-auth/APZTlGpMwMpnAscifHT2ZQrRUSJqLejCks5tzcp3gaJpZM4QD_kq
.

--

Arnaud Tussy-Vassilieff
Développeur web full-stack chez Leaf Websites

Site web : www.leaf-website.esy.es http://www.leaf-website.esy.es
Mail : a.tussy.[email protected] a.tussy.vassilieff@gmail.com
Tél : 07 77 83 29 44

where did you put...

Put this in your polyfills.ts

(window as any).global = window

between line 63 and 70

2018-05-31 18:31 GMT+02:00 Bibhas Bhattacharya notifications@github.com:

where did you put...

Put this in your polyfills.ts

(window as any).global = window


You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/socketio/socket.io-client/issues/1166#issuecomment-393592879,
or mute the thread
https://github.com/notifications/unsubscribe-auth/APZTlPci9GKE3R8lwc1g3qfqWODeXIPiks5t4Br1gaJpZM4QD_kq
.

--

Arnaud Tussy-Vassilieff
Développeur web full-stack chez Leaf Websites

Site web : www.leaf-website.esy.es http://www.leaf-website.esy.es
Mail : a.tussy.[email protected] a.tussy.vassilieff@gmail.com
Tél : 07 77 83 29 44

@amitport thanks the workaround you provided works!! @AngularTeam, How come you keep breaking everything guys :/ you even managed to get your people in the rxjs team and suddenly even rxjs breaks everything now on version changes... been keeping up with angular since first stable release and Im amazed at your ability to break everything on each release.

@LucasFrecia it's a socket.io issue not Angular's. Angular did good by stopping to hide it in version 6 (which is marked as a major breaking release)

Added another pull request two weeks ago https://github.com/webmodules/blob/pull/14 for https://github.com/webmodules/blob (used by engine.io-parser).

It isn't getting any response, anyone here can merge it? @darrachequesne @rauchg @nkzawa?

Adding the (window as any).global = window; to the polyfills.ts worked for me

@amitport tks.
It works fine

I put the (window as any).global = window in the polyfills.ts file
It doesnt give the ReferenceError: global is not defined in localhost but it gives this error if i try to run the production build with http-server for testing purposes.
Any clue as in why this is happening?
It's super urgent!

Hi @gupta82anish,
I put (window as any).global = window; in pollyfills.ts file and ran the project in localhost (development) as well as built it for production and didn't get any error.
It worked like charm.

The (window as any).global = window; in pollyfills.ts workaround seems to work for me in angular core 6.1.0. Let's hope socket.io will update soon..

(window as any).global = window; in pollyfills.ts worked for me as well!!

(window as any).global = window;
That's a very neat solution. But is it the right way of doing things?

@avinexus7 it's not the right way of doing things. It's a workaround for an open issue in socket.io-client: the usage of 'global' object, which does not exist in browsers.

(AFAIK, no one is making an effort for solving this issue, see ignored: https://github.com/socketio/engine.io-parser/issues/99 and https://github.com/webmodules/blob/pull/14)

@amitport could you please reach the NPM support, so that they grant you the rights to publish a new version of the blob package?

@darrachequesne - done, I've submitted a request to NPM

(window as any).global = window
or
(window as any) = window
add the above code in the polyfills.ts file.

According to angular/angular-cli#8160 (comment):

adding the following polyfills.ts should work in Angular@6:

// Add global to window, assigning the value of window itself.
(window as any).global = window;

In any case, this issue should not be resolved IMO, socket.io-client should either remove the implicit dependency on global, or document that a polyfill is needed (by anyone using the pre-bundled sources, not just Angular users)

(BTW where are the sources for latest [email protected]? maybe I could help)

Yes ,this worked for me too..Thanks you

where did you put...

Put this in your polyfills.ts

(window as any).global = window

@bibhas2 Great! worked for me

possibly fixed now that https://github.com/socketio/engine.io-parser/releases/tag/2.1.3 is released (re-installing socket.io-client without package-lock may be required)

not working with
├─ engine.[email protected]
└─ socket.[email protected]

@kartikupadhyay90 can you add details?

after upgrading to 2.2.0 in my ReactNative app, my instance of socket.io is not getting notification from server. Had to downgrade to 2.1.1

@alimek are you sure your bug is related to this issue? is so please add details. Otherwise, please post a new issue

@amitport if thats the only one change between prev version and 2.2.0, then i guess so

@alimek rephrase: if your bug is _the same_ as this one, add details. Otherwise please open a new issue (which may be a regression).

(BTW, I'm not a maintainer of this lib, I'm just commenting about how issue handling works in general. If you want your issue addressed you need to add actionable details and post it appropriately)

In my situation, it seems 2.2.0 depends on "engine.io-client": "~3.3.1", which depends on "engine.io-parser": "~2.1.1". However the engine.io-parser on my system seems to be 2.1.2 which still contains references to the 'global' variable. It seems this has been fixed in 2.1.3, but the npm i seems to be pulling 2.1.2

If i had to make a guess, it seems it might be reverting back to 2.1.2 because the last build for 2.1.3 failed
https://travis-ci.org/socketio/engine.io-parser

Aside from that, i cant figure out why it keeps pulling the older version for me

I've same problem with Jest + React + Typescript, and couldn't fix it setting (window as any).global = window. I tried putting the code in a polyfills.ts file as well,

setupFiles: [
    '<rootDir>/tst/polyfills.ts',
    '<rootDir>/tst/jest.setup.ts',
  ],

and also using Jest's defineProperty method, but still no luck.

Object.defineProperty((window as any), 'global', {});

copyProps(window, global);

Anyone able to solve this for Jest, or know how I can make this work? @amitport any idea?

Thanks,

@eldem and others. I'm closing this as this thread became too a generic mix of possibly unrelated issues. If anybody sees a problem relating to global and socket.io-client, please open a new issue with reproduction instructions, errors shown in console, versions used, etc.,.

Working with Ionic4/Angular7 - installing 2.1.1 and adding (window as any).global = window in \srcpolyfills.ts worked - Thank you!

For my question above: Babel was causing the error while transforming the socket.io file. Adding it in the transformIgnore worked for me.

transformIgnorePatterns: [
    '<rootDir>/node_modules/../lib/socket.io.js'
  ]

@amitport methode work perfectly

Was this page helpful?
0 / 5 - 0 ratings