aws-amplify js to angular app has error: global is not defined

Question

I am testing AWS Amplify from Angular to Cognito User Pool following:

https://docs.amplify.aws/lib/restapi/getting-started/q/platform/js

The Angular app has successfully compiled however the exception throws out in the Chrome console:

index.js:43 Uncaught ReferenceError: global is not defined
at Object../node_modules/buffer/index.js (index.js:43)
at __webpack_require__ (bootstrap:84)
at Module../node_modules/amazon-cognito-identity-js/es/AuthenticationHelper.js (AuthenticationHelper.js:1)
at __webpack_require__ (bootstrap:84)
at Module../node_modules/amazon-cognito-identity-js/es/index.js (index.js:1)
at __webpack_require__ (bootstrap:84)
at Module../node_modules/@aws-amplify/auth/lib-esm/Auth.js (Auth.js:1)
at __webpack_require__ (bootstrap:84)
at Module../node_modules/@aws-amplify/auth/lib-esm/index.js (index.js:1)
at __webpack_require__ (bootstrap:84)

ANy idea please?

beewest · Answer 1 · 2020-05-02T08:12:58.563

25

this suggestion works in this case as well.

<script>
    var global = global || window;
    var Buffer = Buffer || [];
    var process = process || {
      env: { DEBUG: undefined },
      version: []
    };
  </script>

or add to the end of polyfills.ts

(window as any).global = window;
(window as any).process = {
  env: { DEBUG: undefined },
};

edited May 02 '20 at 08:12

answered May 02 '20 at 06:21

beewest

4,486
7
36
63

score 14 · Answer 2 · answered Apr 30 '21 at 19:49

14

The AWS docs suggest adding

(window as any).global = window;

(window as any).process = {
  env: { DEBUG: undefined },
};

to src/polyfills.ts

This has worked in my projects.

https://docs.amplify.aws/start/getting-started/data-model/q/integration/ionic#connect-frontend-to-api

answered Apr 30 '21 at 19:49

glenn

271
2
6

I'm getting this error in svelte-kit too – chovy Oct 19 '21 at 18:09

score 3 · Answer 3 · answered Mar 05 '21 at 09:20

3

I had a chance to fix this issue by adding the below code to index.html file header section.

<head>
<script>
  if (global === undefined) {
    var global = window;
  }
</script>
</head>

answered Mar 05 '21 at 09:20

Manoj Alwis

1,337
11
24

1

Mate, thanks a ton for this. But, do you know why this works? Amplify - vanilla JS - Node.js etc. etc. etc. Thanks. – Rogelio Feb 21 '22 at 00:45

score 1 · Answer 4 · answered Jul 14 '22 at 23:45

1

In my case, it was failing when running npm test. So I had to add the following to test.ts after the imports.

test.ts

(window as any).global = window;

answered Jul 14 '22 at 23:45

Dinesh

1,711
2
20
41

aws-amplify js to angular app has error: global is not defined

4 Answers4