createHash icon indicating copy to clipboard operation
createHash copied to clipboard

Version 1.1.3 fails in browser - Buffer is not defined

Open karl opened this issue 8 years ago • 8 comments

We wanted to use the package to create hashes in Chrome, but on initial testing it seems like this package doesn't work in the browser.

When attempting to import the package it fails with the error message:

Buffer is not defined

You can see an minimal example in this Code Sandbox: https://codesandbox.io/s/x2xyrq2plp

karl avatar Dec 13 '17 15:12 karl

how are you building it, are you building it in an enviroment like browserify or webpack that adds node globals ?

calvinmetcalf avatar Dec 13 '17 16:12 calvinmetcalf

With a bit more investigation it looks like the issue could be that we are using Webpack with a target of electron but I was testing the resulting bundle in Chrome. I’ll confirm if that is the problem tomorrow.

If the electron target is the problem then I’m not sure why it is failing in Code Sandbox!

karl avatar Dec 13 '17 18:12 karl

I am getting a similar error trying to use it with aws-amplify-react-native.

Cant find variable: Buffer in make-hash.js

ColeWDavis avatar Jan 11 '18 07:01 ColeWDavis

Seems it is a problem when using it in a not CommonJS context (such react-native). In this cases, you cannot use native nodejs modules.

For me, it worked (react-native)

  1. Install rn-nodeify globally
  2. Execute rn-nodeify --install "Buffer"
  3. Include a require at make-hash.js => var Buffer = require('buffer').Buffer (this file is not in the reposiroty. Seems its created at npm install )

lfernando-silva avatar Jan 27 '18 23:01 lfernando-silva

Using AWS congnito, I've encountered this error after upgrade to angular and CLI v6. Still don't know how to solve that.

maxime1992 avatar May 16 '18 17:05 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

maxime1992 avatar May 16 '18 17:05 maxime1992

Of note, the current alpha of webpack drops support for automatic NodeJS polyfills, so I'm running into this issue testing out their alpha.

https://github.com/webpack/changelog-v5/blob/master/README.md#automatic-nodejs-polyfills-removed

Automatic Node.js Polyfills Removed

In the early days, webpack's aim was to allow running most node.js modules in the browser, but the module landscape changed and many module uses are now written mainly for frontend purposes. webpack <= 4 ships with polyfills for many of the node.js core modules, which are automatically applied once a module uses any of the core modules (i.e. the crypto module).

While this makes using modules written for node.js easy, it adds these huge polyfills to the bundle. In many cases these polyfills are unnecessary.

webpack 5 stops automatically polyfilling these core modules and focuses on frontend-compatible modules.

MIGRATION:

  • Try to use frontend-compatible modules whenever possible.
  • It's possible to manually add a polyfill for a node.js core module. An error message will give a hint on how to achieve that.
  • Package authors: Use the browser field in package.json to make a package frontend-compatible. Provide alternative implementations/dependencies for the browser.

MLoughry avatar Jan 07 '19 18:01 MLoughry