Meteor 1.5-beta.16 and beta.17 showed 'ReferenceError: Buffer is not defined' client side

[alexgzhou]

my project works fine on Meteor 1.5-beta.14, when updated to Meteor 1.5-beta.16 and beta.17, the server side startup fine with no error, but when i open my site in chrome, an error showed up:

ReferenceError: Buffer is not defined
    at eval (eval at eval (modules.js:52900), <anonymous>:11:18)
    at dynamic-import.js:193
    at fileEvaluate (modules-runtime.js:212)
    at require (modules-runtime.js:135)
    at eval (eval at eval (modules.js:52900), <anonymous>:19:15)
    at dynamic-import.js:193
    at fileEvaluate (modules-runtime.js:212)
    at require (modules-runtime.js:135)
    at eval (eval at eval (modules.js:52900), <anonymous>:11:11)
    at dynamic-import.js:193

i wonder if i need to add some packages?

[benjamn]

This was a deliberate change! See this commit for details.

If it's worth the additional 22KB of minified JS, you can import the Buffer polyfill yourself (in your application, before importing any node_modules):

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

I would recommend at least finding out where you're using the Buffer constructor on the client, and possibly creating your own minimal polyfill for the functionality that you need, to avoid paying for the full polyfill.

[alexgzhou]

Thank you for your great reply, some package in my project uses the Buffer constructor i guess~

[akanix42]

For others who encounter this error, you can easily drop a breakpoint on the error in your browser's inspector, then refresh the page to hit the breakpoint and see via the call stack which package is trying to use Buffer. In my case, it was akryum:vue-component-dev-client.

[zeroasterisk]

Also - just to ease the transition for anyone else, you can put the polyfill in place here - it should load first

<app_path>/client/lib/init.js

// this is an expensive polyfill for clientside Buffer usage
// but we recommend you refactor to remove this dependency
global.Buffer = global.Buffer || require("buffer").Buffer; // eslint-disable-line

// how to refactor
// you can easily drop a breakpoint on the error in your browser's inspector, then refresh the page to hit the breakpoint and see via the call stack which package is trying to use Buffer
// https://github.com/meteor/meteor/issues/8645

[janat08]

I thought the idea was that meteor would tell what packages are required on client. On 1.4.4.3 I'm getting this error after running update all packages. The polyfill doesn't help, but my vue stuff still runs.

[dnish]

Getting the same here:

Uncaught ReferenceError: Buffer is not defined
    at helpers.js (modules.js?hash=b1a7ee7…:9699)
    at fileEvaluate (modules-runtime.js?hash=8587d18…:343)
    at require (modules-runtime.js?hash=8587d18…:238)
    at meteorInstall.node_modules.meteor-node-stubs.node_modules.create-hash.md5.js (modules.js?hash=b1a7ee7…:9541)
    at fileEvaluate (modules-runtime.js?hash=8587d18…:343)
    at require (modules-runtime.js?hash=8587d18…:238)
    at meteorInstall.node_modules.meteor-node-stubs.node_modules.create-hash.browser.js (modules.js?hash=b1a7ee7…:9470)
    at fileEvaluate (modules-runtime.js?hash=8587d18…:343)
    at require (modules-runtime.js?hash=8587d18…:238)
    at meteorInstall.node_modules.meteor-node-stubs.node_modules.crypto-browserify.index.js (modules.js?hash=b1a7ee7…:9306)

[benjamn]

Reporting the problem again at this point is not helpful. Please see the workaround(s) described above.

[dnish]

Sure, but due to my logs, this is caused by some main package (meteor-node-stubs). Above you told that any third party packages cause this error, so I've added my comment to ask if this is a core issue.

// Edit: Didn't see that this issue was closed, sorry.

[benjamn]

That package (called meteor-node-stubs on npm) is installed in most/all Meteor applications in the node_modules directory. Parts of it get bundled automatically whenever someone requires a Node builtin package (like crypto or buffer etc.). So if you're writing a Meteor app that needs Buffer on the client, or using other dependencies of this package that assume it exists, you can easily polyfill it with Buffer = require("Buffer").Buffer.

Newly created apps don't use Buffer (or any stubs that assume it, like crypto), so this problem doesn't come up immediately, but I agree it's something we can and should improve. Specifically, if you import the crypto builtin module, you should get Buffer too.

[Salketer]

Hi ben you got me confused with

Newly created apps don't use Buffer (or any stubs that assume it, like crypto)

My application is crashing when trying to import crypto... I'm importing Buffer in another file for now (same file wouldn't work). From what I can understand from your sentence is that it shouldn't be doing that so I'm wondering what's wrong.

[s-devaney]

@zeroasterisk's solution worked for me. The Winston NPM package was the dependent package.

[benjamn]

As of meteor-node-stubs@0.2.10, there should no longer be any naked references to Buffer in the meteor-node-stubs npm package. When you import the crypto stub, global.Buffer will now be automatically polyfilled. I hope this eliminates undefined Buffer errors stemming from meteor-node-stubs. For any other unsafe uses of Buffer, see the workaround explained above.

[alexanderwe]

@benjamn
Updating the meteor-node-stubs package now resolved the issue for me. Thanks for sharing the information.

[ArnieGA]

Just to confirm that @benjamn 's solution worked for me as well. By simply updating meteor-node-stubs to its latest version (0.2.11 as of this writing) the problem disappeared and my client tests ran without problems. Nothing else had to be done.

Just in case, I'm using practicalmeteor:mocha.

Thank you very much @benjamn for your post! :-D

[huevoncito]

@ArnieGA did you do anything else to get your tests to run? The polyfill works when I run app normally but I still get the Buffer err when running the tests. Thoughts?

[huevoncito]

Ok I fixed this. If anybody else is having this issue when running tests, add the polyfill to a new file <app-root>/client/lib/init.tests.js.

[peculiarity]

Ok it doesn't matter if it's called init.js or whatever. The problem with me is that I've created a js file and the code there is not executed at all.

[maasha]

I am getting this

Uncaught ReferenceError: Buffer is not defined at util.js

Meteor 1.6.1

[abernix]

@maasha Are you getting it on the client? Do you have the meteor-node-stubs npm installed and is it listed in your package.json?

[iehdk]

"meteor-node-stubs": "^0.3.2", is installed. I have isolated the problem to when I install plotly (npm install plotly).

[voluntadpear]

Just for anyone in the future adding Vue to a migrated Meteor app, if akryum:vue-component-dev-client is complaining about this, make sure you have meteor-node-stubs installed and listed in your package.json.