marcdhi/xmtp-chat-starter

JavaScript

XMTP React Hooks Quickstart

Installation

bun install
bun start

Concepts

Head to our docs to understand our hooks concepts with our react SDK

Troubleshooting

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

Install the buffer dependency.

npm i buffer

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

import { Buffer } from "buffer";

window.Buffer = window.Buffer ?? Buffer;

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";

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,
        };
      }
    },
  },
};