40

I am trying to migrate from 5 to 6 using ng update and I get an error

Uncaught ReferenceError: Buffer is not defined
    at Object../node_modules/amazon-cognito-identity-js/node_modules/crypto-browserify/helpers.js (helpers.js:2)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/amazon-cognito-identity-js/node_modules/crypto-browserify/md5.js (md5.js:10)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/amazon-cognito-identity-js/node_modules/crypto-browserify/create-hash.js (create-hash.js:3)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/amazon-cognito-identity-js/node_modules/crypto-browserify/index.js (index.js:12)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/amazon-cognito-identity-js/es/AuthenticationHelper.js (vendor.js:47207)
    at __webpack_require__ (bootstrap:81)

Local environment works well for creating the new angular project. I don't use Buffer. It is something behind the scenes

Any ideas?

UPD

I was trying to update @types/node npm install --save-dev @types/node

+ @types/node@8.9.5
updated 1 package in 12.031s
[!] 26 vulnerabilities found [36141 packages audited]
    Severity: 11 Low | 13 Moderate | 2 High
    Run `npm audit` for more detail

if I run npm audit

npm ERR! code ENOAUDIT
npm ERR! audit Your configured registry (https://registry.npmjs.org/) does not support audit requests.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/myname/.npm/_logs/2018-05-16T13_45_17_410Z-debug.log
Dmitry Grinko
  • 13,806
  • 14
  • 62
  • 86

10 Answers10

85

Ok, after an hour I finally managed to have cognito working on my Angular app (just after upgrading to 6.0).

About the message global is not defined (or something close can't remember). Add the following into index.html:

<!doctype html>
<html lang="en">
<head>
  ...

  <script>
    var global = global || window;
  </script>
</head>

Then, you'll probably get an error saying that Buffer is not defined.

Install the buffer package using npm or yarn. And add the following into polyfills.ts ():

global.Buffer = global.Buffer || require('buffer').Buffer;

Stackoverflow answers/github issues that helped me in case it's not fixed for you after that:

Upgrading to angular-6.x gives "Uncaught ReferenceError: global is not defined"

https://github.com/aws/aws-amplify/issues/840#issuecomment-389459988

https://github.com/aws/aws-amplify/issues/678

https://github.com/aws/aws-amplify/issues/153

https://github.com/crypto-browserify/createHash/issues/20

maxime1992
  • 22,502
  • 10
  • 80
  • 121
  • This solution can work in some cases, but note that some libraries use the existence of `global` to determine a node app. – kyranjamie May 28 '18 at 09:23
  • Why would you do that instead of checking for... `window`? – maxime1992 May 28 '18 at 10:10
  • 1
    How do you prevent a compiler error if you add it to polyfills.ts? ```ERROR in src/polyfills.ts(82,1): error TS2304: Cannot find name 'global'. src/polyfills.ts(82,17): error TS2304: Cannot find name 'global'. src/polyfills.ts(82,34): error TS2304: Cannot find name 'require'. ``` – irhetoric Jun 14 '18 at 16:31
  • "Cannot find name 'require'" is because you probably don't use webpack? It's fine with angular cli. – maxime1992 Jun 14 '18 at 16:34
  • 1
    This answer saves my day, confirmed working solution on Angular 11 – jet_choong Sep 01 '21 at 08:42
28

I add the same issue trying to run the randomBytes method from crypto and added in my polyfill.ts file the global and Buffer references.

Unfortunately, I still had the following error message: _stream_writable.js:57 Uncaught TypeError: Cannot read property 'slice' of undefined

After looking up in the _stream_writable.js file I saw that the undefined pointer was on a process.version.slice instruction.

To sum it up, adding the following lines to my polyfill files completely resolved it:

(window as any).global = window;
global.Buffer = global.Buffer || require('buffer').Buffer;
(window as any).process = {
  version: ''
};

I hope it will help someone out...

rguerin
  • 2,068
  • 14
  • 29
11

@maxime1992
For me, in the beginning, this has also solved a problem that I detected since the migration to angular 6, ie a well-stated module but not found when you want to go on one of these views.
The problem came from there and not from my module import or other.

But when I start the ng test command, now I have this error :

DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead

Apparently, this is a webpack problem.
So, I prefer use this solution :
Adding this line to polyfills.ts should resolve node global error

(window as any).global = window;

Thanks again !!!

Christophe Chevalier
  • 180
  • 13
4

I solved this problem using these declarations in polyfill.ts file. It was mentioned in this issue and I added necessary declarations for other problems too.

import * as process from 'process';
(window as any).process = process;
(window as any)['global'] = window;
global.Buffer = global.Buffer || require('buffer').Buffer;
keivan shirkoubian
  • 75
  • 1
  • 1
  • 9
  • 1
    in Angular 11, out of all the answers here, this is the only one that worked for me when i got the 'Buffer is not defined' error – Baldy May 17 '22 at 15:06
3

What solved it for me was to include the following in my polyfills.ts:
(needed the @ts-ignore to prevent TS2591 error: Cannot find name 'require')

// @ts-ignore
window.Buffer = window.Buffer || require('buffer').Buffer;

See: https://github.com/agoncal/swagger-ui-angular6/issues/2#issuecomment-435307286

CScheiber
  • 83
  • 1
  • 6
3

If you are using Angular 13, 15+ just import the package in the component.

import { Buffer } from 'buffer';

The package itself explicitly states that :

While the Buffer class is available within the global scope, it is still recommended to explicitly reference it via an import or require statement

Now use it as you want

Buffer.from(string).toString(b64);
Rehum
  • 534
  • 5
  • 14
  • Thank you for your answer but I don't think it is a good idea to import module that you are not using. – Dmitry Grinko Apr 19 '23 at 22:35
  • @DmitryGrinko Of course, we import a package to use it. Otherwise, it's uneccessary so we delete it. I edited my answer with a simple use case – Rehum Apr 21 '23 at 14:39
2

in an angular 7 app the workaround (https://github.com/angular/angular-cli/issues/9827#issuecomment-386154063) only works for me if i put

(window as any).global = window;

in a .ts file and import it in polyfill.ts, e.g.

import 'cstm-polyfill.ts';
volkit
  • 1,173
  • 14
  • 21
0

This is a result of a change in the Angular CLI behavior. I ended up solving this by using the following patch:

https://gist.github.com/niespodd/1fa82da6f8c901d1c33d2fcbb762947d

See here for more context:

https://github.com/angular/angular-cli/issues/1548

irhetoric
  • 362
  • 2
  • 9
0

In addition to the accepted answers and other good responses, I needed to add typings.d.ts to my /src folder and type the following in it:

declare var global: any;
declare var require: any;
user2863466
  • 1
  • Welcome to the StackOverflow. Thank you for your response. At the same time, you can suggest editing the accepted answer by clicking on the Edit button under the answer. – Dmitry Grinko Jul 16 '20 at 23:15
-4

If you get this error, and then solve using the suggested method above but then face another error stating something along the lines of:

Uncaught ReferenceError: process is not defined

It's most likely that you're using HttpClient incorrectly in your app. Make sure you're using the HttpClientModule import in app.module, and not accidentally using HttpClient as a provider.

yes:

  imports: [
    HttpClientModule,
  ],

no:

providers: [HttpClient],
user12205620
  • 1