ReferenceError: Can't find variable: Buffer --> pusher-js 7.5.0 not working with react-native

[oelerpearler]

Although it has been already mentionned as a comment (#645 (comment)) in another issue #645, I thought it would be better to create a new issue, since the initial issue description in #645 is mentioning another error, so it might also have different root causes.

Long story short: If you update in a react-native project to the latest pusher-js versions 7.4.1 or 7.5.0, the build phase will work, but when the app tries to start, it will crash and you receive an error

ReferenceError: Can't find variable: Buffer

The project in which I use pusher is on React Native 0.67.4, but the comment from hirbod in #645 (comment) indicates a potential newer version of react native also being affected. Either way I think it doesn't depend much on the react-native version, just pusher-js tryng to use the Buffer type which is (as far as I know) only available in a node-js runtime (also mentionned by hirbod in #645 (comment) suggesting that maybe a polyfill is missing or not working correctly)

[rcugut]

@oelerpearler same here.
I'm using expo sdk 47, with react-native 0.70.5 and I it's opted-in for Hermes.

The error you're describing has to do with the Buffer API that is not part of the RN runtime. I think it used to be(?), and it's mainly only part of the nodejs API.

After some digging I found two ways to move forward:

1. I tried these steps here: https://stackoverflow.com/a/59280380/317884 using rn-nodeify. I no longer have the error with Can't find variable: Buffer, but the app doesn't work, it hangs and throws a different error now (for my project, at least) :-)

   TypeError: Object is not a function
    at randomInt
   

   which indicates to me that some implementation of the Buffer is not quite right.

2. I found out that officially there's another package for react-native: @pusher/pusher-websocket-react-native.
   And this package from this repo (i.e. pusher-js/react-native) is probably the "old way", maybe will be deprecated?

However, when I switched to this new lib, I've run into another issue, which may not apply for other projects, but it was blocking in my situation because I am using another conflicting libs that in my app.

So, my only way forward now was to use my own fork of the official pusher for react-native, which so far works OK-ish, but is not very pleasant to use with authentication.

I'm really starting to re-consider our choice for Pusher for our project, at this point :-/

[eightyfive]

It's worth noting that downgrading to pusher-js@7.4.0 works. Which is an acceptable workaround for now.

With laravel-websockets:

import Echo from "laravel-echo";
import Pusher from "pusher-js/react-native";

Pusher.logToConsole = true;

const client = new Pusher("<PUSHER_KEY>", {
  cluster: "mt1",
  wsHost: "localhost",
  wsPort: 6001,
  enabledTransports: ["ws"],
  forceTLS: false,
});

const echo = new Echo({
  broadcaster: "pusher",
  client,
  disableStats: true,
});

[akhzarna]

Still facing the issue can't find variable: Buffer

[rcugut]

I can confirm that downgrading to v7.4.0 works in my app, and without any shims from rn-nodeify.

Thanks @eightyfive for the tip!

An observation: it has to be exactly version 7.4.0. The same error with Buffer shows up if you use the patch version 7.4.1.

It looks like something changed in the internal tooling to build the dist files, because starting with v7.4.1, there's a separate codeblock in the resulted file dist/react-native/pusher.js that looks like it embeds safe-buffer. There are no other code changes in the sources between 7.4.0 and 7.4.1, so I guess it has to do with the build/dist (internal) tooling. It's minified code, so hard to track exactly: v7.4.0...v7.4.1#diff-db8acb146c5533756f76008ff88ae160cb40e8897d65dc5f5847ac8ced38017cR10
/cc @amad — is this maybe un-intentional?

---

@akhzarna , make sure you set the exact version 7.4.0 in you package.json:

"pusher-js": "7.4.0"

Make sure there's no ~ or ^ in the version string, and don't forget to run npm install.

[i386]

Can confirm that locking to 7.4.0 solves this issue. Make sure you use import Pusher from 'pusher-js/react-native'; rather than pusher-js directly.

[RolSum]

My team and I faced this issue a month ago and we couldn't find a solution until the app displays the stack trace and we saw "pusher.js" in the logs.

Man, I hope they could fix this issue ASAP.

[hirbod]

There is another way: https://github.com/craftzdog/react-native-buffer

It's a JSI polyfill and fast. I did not test it but it might work.

[chanphiromsok]

I can confirm that downgrading to v7.4.0 works in my app, and without any shims from rn-nodeify.

Thanks @eightyfive for the tip!

An observation: it has to be exactly version 7.4.0. The same error with Buffer shows up if you use the patch version 7.4.1.

It looks like something changed in the internal tooling to build the dist files, because starting with v7.4.1, there's a separate codeblock in the resulted file dist/react-native/pusher.js that looks like it embeds safe-buffer. There are no other code changes in the sources between 7.4.0 and 7.4.1, so I guess it has to do with the build/dist (internal) tooling. It's minified code, so hard to track exactly: v7.4.0...v7.4.1#diff-db8acb146c5533756f76008ff88ae160cb40e8897d65dc5f5847ac8ced38017cR10 /cc @amad — is this maybe un-intentional?

@akhzarna , make sure you set the exact version 7.4.0 in you package.json:

"pusher-js": "7.4.0"

Make sure there's no ~ or ^ in the version string, and don't forget to run npm install.

work for me in react-native

[fbenevides]

@chanphiromsok Could you please update to the newest version?