ReferenceError: Buffer is not defined
fabriguespe opened this issue · comments
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.
![CleanShot 2023-11-02 at 16 50 36@2x](https://private-user-images.githubusercontent.com/1447073/280111483-8f4188e6-1b42-4ffe-81cb-7d424282e439.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIxOTA5MTMsIm5iZiI6MTcyMjE5MDYxMywicGF0aCI6Ii8xNDQ3MDczLzI4MDExMTQ4My04ZjQxODhlNi0xYjQyLTRmZmUtODFjYi03ZDQyNDI4MmU0MzkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcyOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MjhUMTgxNjUzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZDhkMmRlNzY1OGFiZGMzZTQ1ODA4MmE4NjMxMTQ4NGZhYTViZjVmN2Y3Y2E3NzRhYWNiODY0YWY0MjMzOWY4YSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.fynV88_4OpkMilwxyQPGucdAi8Nvvs6tKSbgsU5Lwxs)
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)
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
orindex.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
orwebpack.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,
};
}
},
},
};