New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[bug] Uncaught ReferenceError: global is not defined #8160

Closed
amitport opened this Issue Oct 24, 2017 · 28 comments

Comments

Projects
None yet
@amitport

amitport commented Oct 24, 2017

Bug Report or Feature Request (mark with an x)

- [X] bug report -> please search issues before submitting
- [ ] feature request

Versions.

Angular CLI: 1.5.0-rc.3
Node: 8.7.0
OS: win32 x64
Angular: 4.4.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, tsc-wrapped, upgrade

@angular/cdk: 2.0.0-beta.12
@angular/cli: 1.5.0-rc.3
@angular/flex-layout: 2.0.0-beta.9
@angular/material: 2.0.0-beta.12
@angular-devkit/build-optimizer: 0.0.30
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.34
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0-rc.3
@schematics/angular: 0.0.48
typescript: 2.3.4
webpack: 3.8.1

Repro steps.

create angular/cli project
add dependency and import socket.io-client@2.0.4
ng serve --aot
open browser

The log given by the failure.

index.js:10 Uncaught ReferenceError: global is not defined
    at eval (index.js:10)
    at Object.../../../../has-binary2/index.js (vendor.bundle.js:2914)
    at __webpack_require__ (inline.bundle.js:55)
    at eval (index.js:8)
    at Object.../../../../socket.io-parser/index.js (vendor.bundle.js:9569)
    at __webpack_require__ (inline.bundle.js:55)
    at eval (index.js:7)
    at Object.../../../../socket.io-client/lib/index.js (vendor.bundle.js:9527)
    at __webpack_require__ (inline.bundle.js:55)
    at eval (io-service.ts:1)
@dottodot

This comment has been minimized.

dottodot commented Oct 24, 2017

I seeing the same issue as well with ng-socket-io but also with import 'intl'; in polyfills.ts

@amitport

This comment has been minimized.

amitport commented Oct 24, 2017

  • I tried adding (window as any).global = window; to pollyfils.ts, but it didn't work.
  • reverting to 1.5.0-rc.1 worked
@dottodot

This comment has been minimized.

dottodot commented Oct 24, 2017

Strange I've reverted to 1.5.0-rc.2 and still get it, no idea what's going on.

@amitport

This comment has been minimized.

amitport commented Oct 24, 2017

@dottodot
oh sorry, I actually reverted to 1.5.0-rc.1
in any case, make sure it's a clean revert. try deleting node_modules and packge/yarn-lock before npm i

@dottodot

This comment has been minimized.

dottodot commented Oct 24, 2017

Thanks that worked. I've gone back to 1.5.0-rc.2 and that's ok for me so seems like the issue is in 1.5.0-rc.3

@Martin-Wegner

This comment has been minimized.

Martin-Wegner commented Oct 24, 2017

Same problem here since 1.5.0-rc.3, with 1.5.0-rc.2 no problems...

@robisim74

This comment has been minimized.

robisim74 commented Oct 25, 2017

Same error using rc.3 Uncaught ReferenceError: global is not defined also importing another library (jsrsasing). It worked fine until rc.2.

@RicardoVaranda

This comment has been minimized.

Contributor

RicardoVaranda commented Oct 25, 2017

Hi guys, could you please provide a simple repo of this issue, that way it's easier and faster for the team to be able to debug the issue.

@dottodot

This comment has been minimized.

dottodot commented Oct 25, 2017

@RicardoVaranda https://github.com/dottodot/ang5-test

All i've done is create a new project with 1.5.0-rc.3 and included import 'intl'; in polyfills.ts and you get the error

@filipesilva

This comment has been minimized.

Member

filipesilva commented Oct 25, 2017

This is definitely related to #8132 as we've removed the node global object from the compilation environment. I'm investigating what can be done about it.

@filipesilva

This comment has been minimized.

Member

filipesilva commented Oct 25, 2017

Just wanted to let you know we're looking into this. For the intl case using import 'intl/dist/intl'; instead fixes it, but this might not be possible for all libs. socket.io-client also seems to have a dist in socket.io-client/dist/socket.io.js. I don't think the same can be used with ng-socket-io however, since it's importing the node package inside of it...

@MrBlaise

This comment has been minimized.

MrBlaise commented Oct 26, 2017

Hey, I just wanted to chime in. I have the same issue upgrading to 1.5.0-rc.3 causes this issue, 1.5.0-rc.2 works fine. Didn't change anything just upgraded thew version. I use the following polyfills:

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following to support `@angular/animation`. */
import 'web-animations-js';  // Run `npm install --save web-animations-js`.


/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';

/***************************************************************************************************
 * Zone JS is required by Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.
@bogacg

This comment has been minimized.

bogacg commented Oct 28, 2017

With Rc.6 still having same problem.

@dottodot

This comment has been minimized.

dottodot commented Oct 28, 2017

There's a pull request which I assume will fix it guess we just need to wait for it to be added

#8189

@amitport

This comment has been minimized.

amitport commented Oct 31, 2017

This is fixed for me with release 1.5.0-rc.8 (#8250). Thanks!

@StojanovicM

This comment has been minimized.

StojanovicM commented Jan 10, 2018

Hi,
I am using Dragula version 1.5.0 with Angular 5, and still having problem
"ReferenceError: global is not defined"

I have just installed it, imported and added to NgModule -> Imports, and my app crashes with this error.

Is there any step I am missing??

@filipesilva

This comment has been minimized.

Member

filipesilva commented May 2, 2018

On version 6 of Angular CLI we are removing the shim for global and other node built-ins. You can read more about why this change was made in #9827 (comment).

If you are using a library that assumes these globals are present, you can try manually shimming it inside your polyfills.ts file:

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

I ran a quick test with socket.io-client and this seemed to allow it to run.

@gioragutt

This comment has been minimized.

Contributor

gioragutt commented May 4, 2018

@filipesilva Thank you so much!

@krishnareddy226

This comment has been minimized.

krishnareddy226 commented May 7, 2018

declare var $: any;
I am getting the error
$ not defined

@bluefire2121

This comment has been minimized.

bluefire2121 commented May 8, 2018

In my polyfills.ts, the import references to intl were still there. Comment out or delete these if you get stuck, then add (window as any).global= window as @filipesilva stated above.

@tobias74

This comment has been minimized.

tobias74 commented May 29, 2018

It seems that all the import-statements in the polyfill.ts are hoisted in the compiled polyfill.js. Therefore putting

(window as any).global = window;

at the top of the file polyfill.ts did not solve the issue for me, since in the compiled polyfill.js this command was located at the very end of the file (after all the imports).

Solution

I had to put the line

(window as any).global = window;

in a new file (for example "global-shim.ts")

and import this file at the very top of the polyfill.ts

import 'global-shim';

@gioragutt

This comment has been minimized.

Contributor

gioragutt commented May 29, 2018

@tobias74 I put it in the end of the file, it worked for me.

@wnabil wnabil referenced this issue Jun 9, 2018

Closed

Nested lazyload modules #331

1 of 3 tasks complete
@yulm6

This comment has been minimized.

yulm6 commented Jul 9, 2018

When I adding sockjs-client, I got the same issue.
npm install sockjs-client --save

I did as @tobias74 ,maybe it worked,but the brower refreshes frequenly.

@chetanbirajdar

This comment has been minimized.

chetanbirajdar commented Jul 31, 2018

@tobias74 Thanks that worked

PhilippeCorreges added a commit to jobdoneproject/devoirFaitsFrontNodeJS that referenced this issue Jul 31, 2018

@Evllis

This comment has been minimized.

Evllis commented Aug 1, 2018

@filipesilva
Thank you!!!!!!!!! ^_^

@SamiHK

This comment has been minimized.

SamiHK commented Aug 25, 2018

I removed all these things.
import 'intl'; (window as any).global = window; // Run npm install --save intl. import 'intl/locale-data/jsonp/en';

AND NOW :D
This polyfill.ts is working for me.

`import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

import 'core-js/es7/array';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js'; // Run npm install --save classlist.js.

/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';

/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';

/**

  • Required to support Web Animations @angular/common/animations.
  • Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
    **/
    import 'web-animations-js'; // Run npm install --save web-animations-js.

/***************************************************************************************************

  • Zone JS is required by Angular itself.
    */
    import 'zone.js/dist/zone'; // Included with Angular CLI.

/***************************************************************************************************

  • APPLICATION IMPORTS
    */

/**

  • Fix for ngx-chart to work on ie11
    */
    if ( typeof SVGElement.prototype.contains === 'undefined' )
    {
    SVGElement.prototype.contains = HTMLDivElement.prototype.contains;
    }`
@avinexus7

This comment has been minimized.

avinexus7 commented Sep 17, 2018

On version 6 of Angular CLI we are removing the shim for global and other node built-ins. You can read more about why this change was made in #9827 (comment).

If you are using a library that assumes these globals are present, you can try manually shimming it inside your polyfills.ts file:

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

I ran a quick test with socket.io-client and this seemed to allow it to run.

Is this the right way of implementing socket.io in Angular 2? I mean does the above line give any side affects that may be obtrusive in the future?

@BMLande

This comment has been minimized.

BMLande commented Oct 8, 2018

solution of @filipesilva is worked .
i have issue when i am migrating ng5 to ng6 .
thanks @filipesilva

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment