ReferenceError: Buffer is not defined

[Fabri]

Describe the bug

Hello,

I encountered an issue while using the @xmtp/xmtp-js package in a React application running in the browser. The error message is ReferenceError: Buffer is not defined.

It seems that the package is trying to use Node.js's Buffer object, which is not available in the browser environment. This causes the application to crash.

Here's the error stack trace for reference:

Buffer is not defined
ReferenceError: Buffer is not defined
    at ./node_modules/@xmtp/xmtp-js/dist/web/index.js (http://localhost:3000/static/js/bundle.js:94369:8)
    at options.factory (http://localhost:3000/static/js/bundle.js:108687:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:108097:33)
    at fn (http://localhost:3000/static/js/bundle.js:108344:21)
    at ./src/FloatingInbox/index.js (http://localhost:3000/static/js/bundle.js:1355:71)
    at options.factory (http://localhost:3000/static/js/bundle.js:108687:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:108097:33)
    at fn (http://localhost:3000/static/js/bundle.js:108344:21)
    at ./src/Page.js (http://localhost:3000/static/js/bundle.js:1765:72)
    at options.factory (http://localhost:3000/static/js/bundle.js:108687:31)

[Fabri]

If you get into issues with Buffer and polyfills check out the fix below:

1. Install the buffer dependency.

npm i buffer

2. Create a new file, polyfills.js, in the root of your project.

import { Buffer } from "buffer";

window.Buffer = window.Buffer ?? Buffer;

3. Import it into your main file on the first line.

• ReacJS: index.js or index.tsx
• VueJS: main.js
• NuxtJS: app.vue

//has to be on the first line of the file for it to work
import "./polyfills";

4. Update config files.

• Webpack: vue.config.js or webpack.config.js:

const webpack = require("webpack");

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        Buffer: ["buffer", "Buffer"],
      }),
    ],
  },
  transpileDependencies: true,
};

• Vite: vite.config.js:

import { defineConfig } from "vite";
import { Buffer } from "buffer";

export default defineConfig({
  /**/
  define: {
    global: {
      Buffer: Buffer,
    },
  },
  /**/
});

• NuxtJS: nuxt.config.js:

export default {
  build: {
    extend(config, { isClient }) {
      if (isClient) {
        config.node = {
          Buffer: true,
        };
      }
    },
  },
};