41

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/[email protected]
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
3
  • Buffer means what??? Which package is this ? Commented May 16, 2018 at 12:58
  • @RameshRajendran I was trying to update amazon-cognito-identity-js package. I don't use Buffer in my code Commented May 16, 2018 at 13:00
  • Hi, any solution? I'm having the same troubles with amazon cognito
    – maxime1992
    Commented May 16, 2018 at 17:10

10 Answers 10

84

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

5
  • This solution can work in some cases, but note that some libraries use the existence of global to determine a node app.
    – kyranjamie
    Commented May 28, 2018 at 9:23
  • Why would you do that instead of checking for... window?
    – maxime1992
    Commented May 28, 2018 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
    Commented Jun 14, 2018 at 16:31
  • "Cannot find name 'require'" is because you probably don't use webpack? It's fine with angular cli.
    – maxime1992
    Commented Jun 14, 2018 at 16:34
  • 1
    This answer saves my day, confirmed working solution on Angular 11
    – jet_choong
    Commented Sep 1, 2021 at 8: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...

1
  • That worked on angular 12.2.16
    – ColdFire
    Commented Dec 22, 2022 at 14:30
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 !!!

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;
1
  • 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
    Commented May 17, 2022 at 15:06
4

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);
2
  • Thank you for your answer but I don't think it is a good idea to import module that you are not using. Commented Apr 19, 2023 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
    Commented Apr 21, 2023 at 14:39
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

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'; 
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

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;
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. Commented Jul 16, 2020 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],

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.