Lock: global is not defined Angular 6

[Bartheyrman22]

Using any browser, by just performing a login with this library we get this error:

I saw this was already fixed in the main Auth0.js library:
https://github.com/auth0/auth0.js/issues/753

[luisrudge]

it will be fixed in the next release, when we upgrade the auth0-js dependency

[alexDrinkwater]

@luisrudge Is their an easy work around in the meantime?

[luisrudge]

Use the cdn or see the wordaround

[MichaelBui]

I'm using:

    "auth0-js": "^9.7.3",
    "auth0-lock": "^11.8.0",

that was just 3,4 days ago but this error's still happening

[luisrudge]

@MichaelBui can you please run npm ls auth0-js and npm ls auth0-lock in your project root?

[MichaelBui]

Here is the result:

Michaels-MacBook-Pro-4:frontend michaelbui$ npm ls auth0-js
[email protected] /Volumes/***/frontend
├── [email protected] 
└─┬ [email protected]
  └── [email protected]  deduped

Michaels-MacBook-Pro-4:frontend michaelbui$ npm ls auth0-lock
[email protected] /Volumes/***/frontend
└── [email protected] 

Forgot to mention, I'm using Ionic 4 Beta 0.

[luisrudge]

can you paste a stack trace of the issue?

[MichaelBui]

Here you are:

core.js:1633 ERROR Error: Uncaught (in promise): ReferenceError: global is not defined
ReferenceError: global is not defined
    at Object../node_modules/auth0-lock/lib/utils/cdn_utils.js (cdn_utils.js:13)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/auth0-lock/lib/i18n.js (i18n.js:36)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/auth0-lock/lib/core/index.js (index.js:78)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/auth0-lock/lib/ui/box/chrome.js (chrome.js:29)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/auth0-lock/lib/ui/box/container.js (container.js:14)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/auth0-lock/lib/utils/cdn_utils.js (cdn_utils.js:13)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/auth0-lock/lib/i18n.js (i18n.js:36)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/auth0-lock/lib/core/index.js (index.js:78)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/auth0-lock/lib/ui/box/chrome.js (chrome.js:29)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/auth0-lock/lib/ui/box/container.js (container.js:14)
    at __webpack_require__ (bootstrap:81)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3751)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)

[MichaelBui]

This is (partial) code of cdn_utils.js in the npm package:

'use strict';

exports.__esModule = true;
exports.load = load;
exports.preload = preload;

var _auth0Js = require('auth0-js');

var _auth0Js2 = _interopRequireDefault(_auth0Js);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

if (!global.Auth0) {
  global.Auth0 = {};
}

var cbs = {};

[MichaelBui]

And in the source code (https://github.com/auth0/lock/blob/master/src/utils/cdn_utils.js#L3):

import Auth0 from 'auth0-js';

if (!global.Auth0) {
  global.Auth0 = {};
}

const cbs = {};

[luisrudge]

OH yeah, you're right. I mistakenly thought this was only an auth0-js issue, but we have A LOT of global. in our codebase. I don't see us changing that for now, so you'll have to either use our cdn or this workaround:

(window as any).global = window;

[MichaelBui]

I'm using the Ionic app that is generated by ionic start. Where should I put your code?

[luisrudge]

In the entry file, I guess. index.js or something

[MichaelBui]

For people who are facing the same problem, I put this in main.ts of Ionic 4 Beta 0:

(window as any).global = window;

Thanks @luisrudge

[luisrudge]

@MichaelBui Thanks for sharing this!

[shanemac10]

Currently in Ionic 4.1.2

It didn't work in main.ts for me, had to add it to polyfills.ts, based the Issue comment linked below.

Just paste this on the bottom of your app's polyfills.ts...

// BUG FIX: Add global to window, assigning the value of window itself.
// https://github.com/socketio/socket.io-client/issues/1166#issuecomment-386195105
(window as any).global = window;

https://github.com/socketio/socket.io-client/issues/1166#issuecomment-386195105