UUID dependency issue with Angular 6 apps

[vdeantoni]

Hey Guys,

We're working on upgrading our Angular app to v6, and ran into an issue with the optimizely sdk:

Uncaught ReferenceError: global is not defined
    at Object../node_modules/uuid/lib/rng-browser.js (vendor.js:162311)
    at __webpack_require__ (runtime.js:83)
    at Object../node_modules/uuid/v1.js (vendor.js:162352)
    at __webpack_require__ (runtime.js:83)
    at Object../node_modules/uuid/index.js (vendor.js:162252)
    at __webpack_require__ (runtime.js:83)
    at Object../node_modules/optimizely-server-sdk/lib/utils/fns/index.js (vendor.js:131747)
    at __webpack_require__ (runtime.js:83)
    at Object../node_modules/optimizely-client-sdk/index.js (vendor.js:128792)
    at __webpack_require__ (runtime.js:83)

As a temporary workaround we had to add the following polyfill:

window.global = window;

Can you look into this? Perhaps you guys need to bump the uuid library version?

[tylerbrandt]

Hi @deantoni, thanks for letting us know about this issue! It looks like you are using the legacy optimizely-client-sdk package; is that right? We recommend you try upgrading to @optimizely/optimizely-sdk and see if that resolves it (note that there is a minor breaking change in particular usage of the track API).

If that is not an option for you, can you let us know the exact version you are using in your package.json/package.lock? Also, if it's possible, could you provide a minimal package.json/steps that reproduces the issue?

[vdeantoni]

Hey,

As part of upgrading our app to angular 6, the optimizely dependency was also updated to: "@optimizely/optimizely-sdk": "^2.1.0"

Weren't you able to repro this issue? I will see if I can setup a simple project with angular 6 and the optimizely SDK so you can take a look.

[spencerwilson-optimizely]

Hey @deantoni , I checked out v2.1.0, ran npm run build-browser, and looked at the rng code in the resulting bundling. I saw:

/***/ }),
/* 71 */
/***/ (function(module, exports) {

// Unique ID creation requires a high quality random # generator.  In the
// browser this is a little complicated due to unknown quality of Math.random()
// and inconsistent support for the `crypto` API.  We do the best we can via
// feature-detection

// getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
var getRandomValues = (typeof(crypto) != 'undefined' && crypto.getRandomValues.bind(crypto)) ||
                      (typeof(msCrypto) != 'undefined' && msCrypto.getRandomValues.bind(msCrypto));
if (getRandomValues) {
  // WHATWG crypto RNG - http://wiki.whatwg.org/wiki/Crypto
  var rnds8 = new Uint8Array(16); // eslint-disable-line no-undef

  module.exports = function whatwgRNG() {
    getRandomValues(rnds8);
    return rnds8;
  };
} else {
  // Math.random()-based (RNG)
  //
  // If all else fails, use Math.random().  It's fast, but is of unspecified
  // quality.
  var rnds = new Array(16);

  module.exports = function mathRNG() {
    for (var i = 0, r; i < 16; i++) {
      if ((i & 0x03) === 0) r = Math.random() * 0x100000000;
      rnds[i] = r >>> ((i & 0x03) << 3) & 0xff;
    }

    return rnds;
  };
}

No references to global :\ As @tylerbrandt noted, your original stack trace looks as though it was made with an old release of the SDK (and a different package, as a matter of fact; the SDK package was renamed to @optimizely/optimizely-sdk with version 2.0.0 in mid April).

As a best-effort, I fetched the last release of optimizely-client-sdk (the old package) and checked its dist/optimizely.js. That module does refer to global, but Chrome 66 doesn't seem to have any trouble evaluating that module.

Could you try upgrading to the latest release of the @optimizely/optimizely-sdk and provide a new stack trace, if you're still having the issue?

[vdeantoni]

Hey Guys,

Thanks for looking into it. When I have some free cycles I'll give this another try. The polyfill works fine for now.

Thanks again.