Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 6 Uncaught ReferenceError: Buffer is not defined

Tags:

angular

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 
like image 335
Dmitry Grinko Avatar asked May 16 '18 12:05

Dmitry Grinko


1 Answers

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

like image 83
maxime1992 Avatar answered Sep 21 '22 23:09

maxime1992