From 67d0fbf5aa1dac5e621abaea62a1f309253749b5 Mon Sep 17 00:00:00 2001
From: Ry Racherbaumer <ry@xmtp.com>
Date: Wed, 11 Sep 2024 11:50:03 -0500
Subject: [PATCH] Update JS SDK README

---
 packages/js-sdk/README.md | 54 ++++++++++++++++++++++++++++++++++++---
 1 file changed, 51 insertions(+), 3 deletions(-)

diff --git a/packages/js-sdk/README.md b/packages/js-sdk/README.md
index 1dc5e10cb..a98b323a9 100644
--- a/packages/js-sdk/README.md
+++ b/packages/js-sdk/README.md
@@ -47,13 +47,61 @@ pnpm install @xmtp/xmtp-js
 yarn add @xmtp/xmtp-js
 ```
 
-Additional configuration is required in React environments due to the removal of polyfills from Webpack 5.
+## Requirements
+
+### Buffer polyfill
+
+A Buffer polyfill is required for browser environments.
+
+See [this solution](https://docs.xmtp.org/dms/troubleshoot#why-is-my-app-failing-with-a-buffer-is-not-found-error) for implementation details.
 
 ## Troubleshoot
 
-### Buffer polyfill
+### WebAssembly issues
+
+This SDK uses WebAssembly, which may require additional configuration in your environment.
+
+#### Vite
+
+**vite.config.js**
+
+```js
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  optimizeDeps: {
+    exclude: ['@xmtp/user-preferences-bindings-wasm'],
+  },
+})
+```
 
-If you run into issues with Buffer and polyfills, see this [solution](https://xmtp.org/docs/faq#why-is-my-app-failing-with-a-buffer-is-not-found-error).
+#### Next.js
+
+Configuration is dependent on your version of Next.js.
+
+**next.config.mjs**
+
+Next.js < 15
+
+```js
+const nextConfig = {
+  experimental: {
+    serverComponentsExternalPackages: ['@xmtp/user-preferences-bindings-wasm'],
+  },
+}
+
+export default nextConfig
+```
+
+Next.js >= 15
+
+```js
+const nextConfig = {
+  serverExternalPackages: ['@xmtp/user-preferences-bindings-wasm'],
+}
+
+export default nextConfig
+```
 
 ### BigInt polyfill