Amplify-js: Not working with rollup (includes fix)

[keean]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

Fails in browser with _global undefined when used with Rollup.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than AWS Amplify.

What is the expected behavior?

import of amazon-cognito-identity.js should work.

Which versions of Amplify, and which browser / OS are affected by this issue? Did this work in previous versions?

All browsers appear to be affected, it happens with NPM packages [email protected], [email protected]

You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app.

It appears to be a problem with the crypto-browserify module used by amazon-cogito-identity-js not conforming to CommonJS standards. The "rng.js" file needs to be modified as follows:

// Original code adapted from Robert Kieffer.
// details at https://github.com/broofa/node-uuid
(function() {
  var _global = this;

  if (_global == undefined) {
      _global = global;
  }

  var mathRNG, whatwgRNG;

  // NOTE: Math.random() does not guarantee "cryptographic quality"
  mathRNG = function(size) {
    var bytes = new Array(size);
    var r;

    for (var i = 0, r; i < size; i++) {
      if ((i & 0x03) == 0) r = Math.random() * 0x100000000;
      bytes[i] = r >>> ((i & 0x03) << 3) & 0xff;
    }

    return bytes;
  }

  if (_global.crypto && crypto.getRandomValues) {
    whatwgRNG = function(size) {
      var bytes = new Uint8Array(size);
      crypto.getRandomValues(bytes);
      return bytes;
    }
  }

  module.exports = whatwgRNG || mathRNG;

}())

The new lines are:

  if (_global == undefined) {
      _global = global;
  }

[capaj]

nicer fix would be

var _global = this || global;

on the first line of IIFE body.

[matrunchyk]

Could you please merge it?

[sw-yx]

for those finding this from the future, the modularization effort #3365 shipped in April 2020 and you can use Amplify with Rollup with a few small tweaks: https://dev.to/swyx/making-aws-amplify-work-with-rollup-2d9m

[ioannist]

I am getting a huge list of...

'@aws-sdk/eventstream-serde-browser' is imported by node_modules\@aws-sdk\client-s3\dist\es\runtimeConfig.browser.js, but could not be resolved – treating it as an external dependency
'@aws-sdk/md5-js' is imported by node_modules\@aws-sdk\client-s3\dist\es\runtimeConfig.browser.js, but could not be resolved – treating it as an external dependency
'@aws-sdk/hash-blob-browser' is imported by node_modules\@aws-sdk\client-s3\dist\es\runtimeConfig.browser.js, but could not be resolved – treating it as an external dependency
'@aws-sdk/xml-builder' is imported by node_modules\@aws-sdk\client-s3\dist\es\protocols\Aws_restXml.js, but could not be resolved – treating it as an external dependency
...

my rollup plugins include:

      resolve({
        browser: true,
        dedupe: ['svelte'],
        preferBuiltins: false
      }),
      json(),
      commonjs(),
      nodeResolve(),

Using:
"aws-amplify": "^3.0.24",
"@rollup/plugin-commonjs": "^14.0.0",
"@rollup/plugin-json": "^4.1.0",
"@rollup/plugin-node-resolve": "^8.4.0",

[escodel]

@ioannist same here. Attempted to get a svelte app running with amplify, switched from rollup to webpack and still no luck. Compiling but getting a utilUtf8Browser is not defined in my main.js for both cases for some reason and found myself here.

I know this issue is closed, but wondering if this needs more attention. Tried @sw-yx approach and couldn't get it working. Also saw the samples just recently posted but nothing on svelte or using rollup/webpack without a framework yet... hoping that changes! 😉

[brianjychan]

Facing the same errors when working on a svelte + amplify app like @escodel.

I wanted to provide a fuller error output:

1 (same error and config as @ioannist , showing the error is Unresolved Dependencies)

(!) Unresolved dependencies
@aws-sdk/credential-provider-cognito-identity (imported by node_modules/@aws-amplify/core/lib-esm/Credentials.js)
@aws-sdk/util-hex-encoding (imported by node_modules/@aws-amplify/core/lib-esm/Signer.js)
(...etc.)

I also have 3 other errors:

2

(!) Missing global variable names
Use output.globals to specify browser global variable names corresponding to external modules
@aws-sdk/util-utf8-browser (guessing 'utilUtf8Browser')
@aws-sdk/credential-provider-cognito-identity (guessing 'credentialProviderCognitoIdentity')
(...etc.)

3

(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en/#error-this-is-undefined
node_modules/aws-amplify/lib-esm/withSSRContext.js
1: var __assign = (this && this.__assign) || function () {
                   ^
2:     __assign = Object.assign || function(t) {
3:         for (var s, i = 1, n = arguments.length; i < n; i++) {
...and 1 other occurrence
node_modules/@aws-amplify/storage/lib-esm/index.js
11:  * and limitations under the License.
12:  */
13: var __assign = (this && this.__assign) || function () {
                    ^
14:     __assign = Object.assign || function(t) {
15:         for (var s, i = 1, n = arguments.length; i < n; i++) {
...and 1 other occurrence
node_modules/@aws-amplify/core/lib-esm/Hub.js
11:  * and limitations under the License.
12:  */
13: var __assign = (this && this.__assign) || function () {
                    ^
14:     __assign = Object.assign || function(t) {
15:         for (var s, i = 1, n = arguments.length; i < n; i++) {
...and 5 other occurrences

...and 65 other files

4

(!) Circular dependencies
node_modules/@aws-amplify/core/lib-esm/index.js -> node_modules/@aws-amplify/core/lib-esm/Signer.js -> node_modules/@aws-amplify/core/lib-esm/Util/index.js -> node_modules/@aws-amplify/core/lib-esm/Util/Reachability.js -> node_modules/@aws-amplify/core/lib-esm/index.js
node_modules/@aws-amplify/pubsub/lib-esm/index.js -> node_modules/@aws-amplify/pubsub/lib-esm/PubSub.js -> node_modules/@aws-amplify/pubsub/lib-esm/Providers/index.js -> node_modules/@aws-amplify/pubsub/lib-esm/Providers/AWSAppSyncRealTimeProvider.js -> node_modules/@aws-amplify/pubsub/lib-esm/index.js
node_modules/@aws-amplify/datastore/lib-esm/util.js -> node_modules/@aws-amplify/datastore/lib-esm/types.js -> node_modules/@aws-amplify/datastore/lib-esm/util.js
node_modules/aws-amplify/lib-esm/index.js -> node_modules/aws-amplify/lib-esm/withSSRContext.js -> node_modules/aws-amplify/lib-esm/index.js