Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Version 1.1.3 fails in browser - Buffer is not defined #20

Open
karl opened this issue Dec 13, 2017 · 7 comments
Open

Version 1.1.3 fails in browser - Buffer is not defined #20

karl opened this issue Dec 13, 2017 · 7 comments

Comments

@karl
Copy link

karl commented Dec 13, 2017

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

@calvinmetcalf
Copy link
Contributor

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

@karl
Copy link
Author

karl commented Dec 13, 2017

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!

@ColeWDavis
Copy link

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

Cant find variable: Buffer in make-hash.js

@lfernando-silva
Copy link

lfernando-silva commented Jan 27, 2018

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 )

@maxime1992
Copy link

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

@maxime1992
Copy link

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

@MLoughry
Copy link

MLoughry commented Jan 7, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants