Uncaught ReferenceError: global is not defined in latest Angular 6 RC

[richardsengers]

Do you want to request a feature or report a bug?
Feature / Bug

What is the current behavior?
A dependencies of Buffer.js is causing an error on global node variable.

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.
Create a new Angular cli 6 project and add AWS Cognito. Once you import aws-sdk or amazon-cognito-identity-js you'll get an error "Uncaught ReferenceError: global is not defined" from Buffer.js

What is the expected behavior?
Run an Angular 6 project without the dependency of the global node variable

I'm testing an Angular 6 app with AWS Cognito and noticed an error in my console.

"Uncaught ReferenceError: global is not defined"

After some research I came acros this comment from the Angular CLI team

angular/angular-cli#9827 (comment)

I think when Angular 6 is released, this is going to be an issue

[richardzcode]

@richardsengers thank you for reporting this! We are following the topic and will see what we can do in the mean time.

[glitchbane]

Not sure what the status of this is, since it is marked as closed but the latest version does not have a fix. #139 is referenced above, but 139 has a reference back to this issue. Please clarify?

[richardsengers]

Hi @glitchbane
139 is an issue from another repo (Angular quicksrtart) which is closed in favor of this issue. This issue is still open though.

[CihanSari]

Just for reference, I have passed through this issue with adding these lines on my index.html head:

<!-- https://github.com/aws/aws-amplify/issues/678 fix: -->
<script>
  if (global === undefined) {
    var global = window;
  }
</script>
<!-- https://github.com/aws/aws-amplify/issues/678 fix end-->

[pdkpavankumar]

@CihanSari The workaround you provided works 👍

[richardsengers]

I think for now the best option would be to include

(window as any).global = window;

In your polyfills.ts file, as mentioned here:
angular/angular-cli#9827 (comment)

[maxime1992]

In case anyone is having that problem after upgrading to Angular 6 and using cognito, I've written a SO answer that might help: https://stackoverflow.com/a/50377270/2398593

[mlabieniec]

We will add this to the polyfills within amplify

[haverchuck]

We updated the Amplify documentation to describe how to fix this issue for an Angular 6 app. A more permanent solution will be forthcoming when we are able to update dependencies.

[jsefiani]

Why is this issue closed?

[antoninbeaufort]

The title of this issue is unfortunate because I don't think it has much to do with Angular at all. I just got this in a React application, and I think it largely depends on what the underlying bundler configuration is—in this case Webpack.

What's likely happening is that the dependency on buffer is bleeding into browser code within aws-amplify. In my case (your milage may vary), this resolved my issue:

// This causes an error
import { Amplify } from 'aws-amplify';

// This doesn't
import { Amplify } from '@aws-amplify/core';

So if you get this error, it probably depends on whether the modules imported happen to bump into the usage of buffer. I really think this is a quality control issue with the aws-amplify package.

I had this errror too with a Vue app.

[nazmifeeroz]

2 years later since this issue was opened, I'm still seeing this error in React app..

I'm following the Amplify tutorials exactly.

Am i missing any sort of config?

[LumberSzquatch]

@nazmifeeroz Same here, but in a Vue app. Maybe the issue runs deeper? I ended up stumbling upon this thread aws/aws-sdk-js#3673. OP provided what I thought were some interesting nuggets of info. A similar solution to "fixing" the issue is provided there as well, so that may not be helpful; however, maybe it will help someone trying to refine their searching keywords.

[mgagna]

Same problem still happening in June 2021
I'm using Vue.js 3
Package versions:

• "aws-amplify": "4.1.2",
• "vue": "3.1.2",
• "typescript": "4.3.4",
• "vite": "2.3.8",

This workaround from @CihanSari worked well, even using Auth from Amplify.

Just for reference, I have passed through this issue with adding these lines on my index.html head:

<!-- https://github.com/aws/aws-amplify/issues/678 fix: -->
<script>
  if (global === undefined) {
    var global = window;
  }
</script>
<!-- https://github.com/aws/aws-amplify/issues/678 fix end-->

Why is this closed?

[algoflows]

Why close the issue when it isn't solved. Looking to move away from the amplify stack if this keeps happening!

[0x6c23]

Have the same issue using Vue 3.0.5 and aws-amplify 4.1.3

[craigchandler]

thought i'd give amplify a go with Angular 12. Hit this error straight away, Is Amplify useless given this bugs response?

[jmhmd]

Getting the same error, but with @aws-sdk/client-s3

Using:

• "vue": "^3.2.26"
• "vite": "^2.7.9"
• "@vitejs/plugin-vue": "^1.10.2"
• "@aws-sdk/client-s3": "^3.45.0"

Same workaround header script gets rid of the error, but annoying and wasted a lot of time trying to figure out what was wrong.

[k-vikram]

Same workaround works well vite + react + TS projects!

Update:

Found a better better fix for Vite Projects. Edit the vite.config.[js/ts] file with the following:

export default defineConfig({
  define: {
    "global": {},
  },
});

Works like a charm!

[dsriniv]

Angular 13 still facing the same issue. I tried adding polyfill.ts with (window as any).global = window;. But nothing seems to be working.

package.json

"@aws-amplify/auth": "^4.5.9"   // Latest

Error

Chrome Headless 103.0.5060.53 (Linux x86_64) ERROR
  An error was thrown in afterAll
  ReferenceError: global is not defined
      at Object.13195 (http://localhost:9876/_karma_webpack_/webpack:/node_modules/buffer/index.js:43:30)
      at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
      at Module.92634 (http://localhost:9876/_karma_webpack_/vendor.js:37304:64)
      at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
      at Module.53843 (http://localhost:9876/_karma_webpack_/vendor.js:42144:79)
      at require (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
      at Object.89439 (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@aws-amplify/auth/lib/Auth.js:83:36)
      at require (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
      at Object.43912 (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@aws-amplify/auth/lib/index.js:15:14)
      at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
Chrome Headless 103.0.5060.53 (Linux x86_64): Executed 0 of 0 ERROR (0.078 secs / 0 secs)

[Sife-ops]

Echoing my disappointment. Aws-amplify basically unusable without workarounds in a Vite project due to ReferenceError: global is not defined.

[abdallahshaban557]

@Sife-ops - can you please try the workaround mentioned in this comment. Does it resolve your issue? #10242 (comment)

[markhker]

This comment #10242 (comment) worked for me in my Vite project

[abdallahshaban557]

That is awesome @markhker - thank you for confirming it!

@Sife-ops - any updates on your end? @dsriniv - can you also try the workaround mentioned above?

[shmert]

Evaluating Amplify and Angular. Started a brand new vanilla Angular13 project, added Amplify, and am at a dead end with this years-old bug. This concludes the evaluation.

[abdallahshaban557]

Hi @shmert - did you try the recommendation mentioned in this comment? #10242 (comment)

[lucatsf]

@CihanSari thanks man

[ZalgirisKaunas]

still doesn't work with vue 3 and quasar

[nadetastic]

Hi @ZalgirisKaunas to clarify, is the workaround mentioned not working for you with Vue3/Quasar?

[ZalgirisKaunas]

  if (global === undefined) {
    var global = window;
  }

Only adding this to index.html worked

[nadetastic]

Got it, thanks for the update and glad you were able to get it working @ZalgirisKaunas

[mclean25]

Same workaround works well vite + react + TS projects!

Update:

Found a better better fix for Vite Projects. Edit the vite.config.[js/ts] file with the following:

export default defineConfig({
  define: {
    "global": {},
  },
});

Works like a charm!

I had this working for Vite as well, until it caused me a separate issue with Axios where it expected the global object to be something different. Also got working by adding this after <head> in index.html

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

[DavithkbY]

Have angular 15 and latest version of amplify still stuck. Tried all the solutions none of them work, no script in index, no polyfills , nothing!

[CaffGeek]

Have angular 15 and latest version of amplify still stuck. Tried all the solutions none of them work, no script in index, no polyfills , nothing!

Same w Angular 16

[nadetastic]

@DavithkbY could you please open a new issue with additional context/information on what you are seeing? Thanks!

[DavithkbY]

@DavithkbY could you please open a new issue with additional context/information on what you are seeing? Thanks!

I finally managed to fix it!
So I was not including polyfill file everywhere. For angular you need to include it in:
tsconfig.spec.json as :
"files": [ "src/polyfills.ts" ],

in tsconfig.app.json as:
"files": [ "src/polyfills.ts" ],

In angular.json in BOTH (!!IMPORTANT!!) builder for TEST and EVERY OTHER BUILDER.
So in Angular.JSON Search for "polyfills" everywhere and include the file !!!

My polyfills.ts file which works:
`(window as any).global = window;

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

So just to conclude, I hadn't included the damn polyfills file in every location needed. No one on the internet either told me to include it in the tsconfig files and the other builds(which in hindsight seems pretty logical..)
I hope you guys can get your apps fixed too!

[DavithkbY]

Have angular 15 and latest version of amplify still stuck. Tried all the solutions none of them work, no script in index, no polyfills , nothing!

Same w Angular 16

Could you please check my fix on the post above

[bilalakkari]

In case anyone is having that problem after upgrading to Angular 6 and using cognito, I've written a SO answer that might help: https://stackoverflow.com/a/50377270/2398593

Thank you man... i really appreciate it.