ReferenceError: global is not defined - Intl polyfill

[MattMorrisDev]

Versions

Angular CLI: 6.0.0-beta.5
Node: 8.9.0
OS: darwin x64
Angular: 6.0.0-beta.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 6.0.0-beta.4
@angular/cli: 6.0.0-beta.5
@angular/material: 6.0.0-beta.4
@angular-devkit/build-optimizer: 0.4.5
@angular-devkit/core: 0.4.5
@angular-devkit/schematics: 0.4.5
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 6.0.0-beta.5
@schematics/angular: 0.4.5
@schematics/package-update: 0.4.5
typescript: 2.6.2
webpack-bundle-analyzer: 2.10.0
webpack: 4.0.1

(Side note: the issue template says to use ng --version, but that was removed in a recent version and wasn't mentioned as a breaking change :))

Repro steps

• I'm importing the following in polyfills.ts:

  import 'intl';
  import 'intl/locale-data/jsonp/en';

Observed behavior

On app startup, I see the following error:

index.js:2 Uncaught ReferenceError: global is not defined
    at eval (index.js:2)
    at Object../node_modules/intl/index.js (polyfills.js:2880)
    at __webpack_require__ (runtime.js:75)
    at eval (polyfills.ts:36)
    at Object../src/polyfills.ts (polyfills.js:2926)
    at __webpack_require__ (runtime.js:75)
    at Object.1 (polyfills.js:2937)
    at __webpack_require__ (runtime.js:75)
    at checkDeferredModules (runtime.js:44)
    at Array.webpackJsonpCallback [as push] (runtime.js:31)

where index.js is the following:

// Expose `IntlPolyfill` as global to add locale data into runtime later on.
global.IntlPolyfill = require('./lib/core.js');

// Require all locale data for `Intl`. This module will be
// ignored when bundling for the browser with Browserify/Webpack.
require('./locale-data/complete.js');

// hack to export the polyfill as global Intl if needed
if (!global.Intl) {
    global.Intl = global.IntlPolyfill;
    global.IntlPolyfill.__applyLocaleSensitivePrototypes();
}

// providing an idiomatic api for the nodejs version of this module
module.exports = global.IntlPolyfill;

It doesn't crash the application, although the browser I'm using doesn't need the polyfill. But I wouldn't expect to see this error normally.

[clydin]

(Side note: the issue template says to use ng --version, but that was removed in a recent version and wasn't mentioned as a breaking change :))

^^^ That was a bug and is fixed in master

As to the issue, the value global does not exist in a web browser. Node shims have been removed in 6.0. For more details on why, please see this comment: #9827 (comment)

The polyfill in question is also no longer needed by Angular as mentioned in the changelog for 5.0: https://github.com/angular/angular/blob/master/CHANGELOG.md#500-pentagonal-donut-2017-11-01

[shiamalon]

I'm having the exact same issue after upgrading my project to angular 6. Is there a solution for it? I'm not really understanding how to solve it from the reply above.

[MattMorrisDev]

@shiamalon Remove the intl imports completely - they aren't needed in v6.

[takahser]

for those, who get the slightly different error ReferenceError: global is not defined at Object.getWindow, this is the fix:

add to polyfill.ts:
(window as any).global = window;

see: auth0/auth0.js#753

[MateWW]

For me polyfills.js from project generated by latest cli solved problem :)

[ghost]

Had the same issue after upgrading to angular 6 with @angular/cli ng update

Fixed it by adding

import 'intl';

to polyfills.ts

[shiamalon]

@MattMorrisDev thank's!

@shiamalon Remove the intl imports completely - they aren't needed in v6.

[Sharpiro]

I just had to use @takahser 's fix using a fresh install of angular cli 6.1.0-rc.3 in order to use Buffer

[aniruddhadas9]

I am even getting this in router transiction when moved from angular 5 to 7.0.0.beta.5 . Any one got this issue before

  | defaultErrorLogger | @ | core.js:11804
-- | -- | -- | --
  | push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError | @ | core.js:11850
  | next | @ | core.js:13818
  | schedulerFn | @ | core.js:9168
  | push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub | @ | Subscriber.js:209
  | push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next | @ | Subscriber.js:147
  | push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next | @ | Subscriber.js:80
  | push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next | @ | Subscriber.js:55
  | push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next | @ | Subject.js:47
  | push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit | @ | core.js:9152
  | (anonymous) | @ | core.js:13376
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke | @ | zone.js:388
  | push../node_modules/zone.js/dist/zone.js.Zone.run | @ | zone.js:138
  | push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular | @ | core.js:13313
  | onHandleError | @ | core.js:13376
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError | @ | zone.js:392
  | push../node_modules/zone.js/dist/zone.js.Zone.runGuarded | @ | zone.js:154
  | _loop_1 | @ | zone.js:677
  | api.microtaskDrainDone | @ | zone.js:686
  | drainMicroTaskQueue | @ | zone.js:602
  | Promise.then (async) |   |  
  | scheduleMicroTask | @ | zone.js:578
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask | @ | zone.js:410
  | onScheduleTask | @ | zone.js:297
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask | @ | zone.js:401
  | push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask | @ | zone.js:232
  | push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask | @ | zone.js:252
  | scheduleResolveOrReject | @ | zone.js:862
  | resolvePromise | @ | zone.js:808
  | (anonymous) | @ | zone.js:724
  | webpackJsonpCallback | @ | bootstrap:25

[magervino]

what fixed for me: npm install --save-dev intl.
I guess what broke it here is that i installed testing frameworks through angular cli and then changed the app file.
Now everything up and running! =)

[danieldanielecki]

In case, if your target is node in webpack (target: 'node'), because you want to fix "Can't resolve 'fs'. Then you're getting the following error Fix: "Uncaught ReferenceError: global is not defined" do it as follows node: { global: true, fs: 'empty' }. Bonus: if you got error "Uncaught ReferenceError: exports is not defined". simply add libraryTarget: 'umd'. The complete webpack config code is below.

const webpackConfig = {
  node: { global: true, fs: 'empty' }, // Fix: "Uncaught ReferenceError: global is not defined", and "Can't resolve 'fs'".
  output: {
    libraryTarget: 'umd' // Fix: "Uncaught ReferenceError: exports is not defined".
  }
};

module.exports = webpackConfig; // Export all custom Webpack configs.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}