ReferenceError: Buffer is not defined

tomatobybike commented

2022-05-06 02:50:05 +00:00

(Migrated from github.com)

when i use gray-matter in vite react project, found this error:

react_devtools_backend.js:3973 ReferenceError: Buffer is not defined
    at Object.exports2.toBuffer (utils.js:36:38)
    at module2.exports (to-file.js:28:36)
    at matter (index.js:34:14)
    at getFile (Docs.jsx:154:17)

how to fix

when i use gray-matter in vite react project, found this error: ``` react_devtools_backend.js:3973 ReferenceError: Buffer is not defined at Object.exports2.toBuffer (utils.js:36:38) at module2.exports (to-file.js:28:36) at matter (index.js:34:14) at getFile (Docs.jsx:154:17) ``` how to fix

👍 5

tomatobybike commented

2022-05-06 03:04:28 +00:00

(Migrated from github.com)

Install this library

yarn add @esbuild-plugins/node-globals-polyfill

add this import to your vite.config.js

and add this in your vite.config.js


import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
export default defineConfig({
    // ...other config settings
    optimizeDeps: {
        esbuildOptions: {
            // Node.js global to browser globalThis
            define: {
                global: 'globalThis'
            },
            // Enable esbuild polyfill plugins
            plugins: [
                NodeGlobalsPolyfillPlugin({
                    buffer: true
                })
            ]
        }
    }
}

Install this library ```sh yarn add @esbuild-plugins/node-globals-polyfill ``` add this import to your vite.config.js and add this in your vite.config.js ```js import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill' export default defineConfig({ // ...other config settings optimizeDeps: { esbuildOptions: { // Node.js global to browser globalThis define: { global: 'globalThis' }, // Enable esbuild polyfill plugins plugins: [ NodeGlobalsPolyfillPlugin({ buffer: true }) ] } } } ```

🎉 11

TeemuKoivisto commented

2022-09-16 15:45:46 +00:00

(Migrated from github.com)

Wow rarely I find solutions that work straight away, thanks @tomatobybike !

segevfiner commented

2023-04-20 15:44:42 +00:00

(Migrated from github.com)

Would be nicer if this library was compatible with the browser to begin with, or add a browser build defined in the package.json

Would be nicer if this library was compatible with the browser to begin with, or add a browser build defined in the `package.json`

👍 9

segevfiner commented

2023-04-20 17:39:28 +00:00

(Migrated from github.com)

It seems optimizeDeps isn't run on vite build...

It seems optimizeDeps isn't run on `vite build`...

andrewspy commented

2023-08-17 21:31:52 +00:00

(Migrated from github.com)

vite-plugin-node-polyfills should solve both dev/build problem. See: https://www.npmjs.com/package/vite-plugin-node-polyfills

👍 4

transtone commented

2024-05-02 01:09:58 +00:00

(Migrated from github.com)

if use nuxtjs, see https://github.com/nuxt/nuxt/issues/25016

shubham4538 commented

2024-06-13 10:25:56 +00:00

(Migrated from github.com)

Install this library

yarn add @esbuild-plugins/node-globals-polyfill

add this import to your vite.config.js

and add this in your vite.config.js

import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
export default defineConfig({
    // ...other config settings
    optimizeDeps: {
        esbuildOptions: {
            // Node.js global to browser globalThis
            define: {
                global: 'globalThis'
            },
            // Enable esbuild polyfill plugins
            plugins: [
                NodeGlobalsPolyfillPlugin({
                    buffer: true
                })
            ]
        }
    }
}

Yes this works but when I checked the matter, it has content as html data with also includes the metadeta which I included in the --- ... --- and the data field was an empty object.

> Install this library > > ```shell > yarn add @esbuild-plugins/node-globals-polyfill > ``` > > add this import to your vite.config.js > > and add this in your vite.config.js > > ```js > import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill' > export default defineConfig({ > // ...other config settings > optimizeDeps: { > esbuildOptions: { > // Node.js global to browser globalThis > define: { > global: 'globalThis' > }, > // Enable esbuild polyfill plugins > plugins: [ > NodeGlobalsPolyfillPlugin({ > buffer: true > }) > ] > } > } > } > ``` Yes this works but when I checked the matter, it has `content` as html data with also includes the metadeta which I included in the `--- ... ---` and the data field was an empty object.

s-light commented

2024-10-22 09:48:35 +00:00

(Migrated from github.com)

vite-plugin-node-polyfills should solve both dev/build problem. See: https://www.npmjs.com/package/vite-plugin-node-polyfills

did work for me in a quasar vue.js vite setup.

quasar.conf.js

const { configure } = require("quasar/wrappers");

// required for the gray-matter plugin.
// https://github.com/davidmyersdev/vite-plugin-node-polyfills
const { nodePolyfills } = require("vite-plugin-node-polyfills");

module.exports = configure(function (/* ctx */) {
    return {
      build: {
      vitePlugins: [
                      nodePolyfills(),
            ],
        },
    };
});

> vite-plugin-node-polyfills should solve both dev/build problem. See: https://www.npmjs.com/package/vite-plugin-node-polyfills did work for me in a quasar vue.js vite setup. `quasar.conf.js` ```js const { configure } = require("quasar/wrappers"); // required for the gray-matter plugin. // https://github.com/davidmyersdev/vite-plugin-node-polyfills const { nodePolyfills } = require("vite-plugin-node-polyfills"); module.exports = configure(function (/* ctx */) { return { build: { vitePlugins: [ nodePolyfills(), ], }, }; }); ```

winner106 commented

2025-05-27 08:39:10 +00:00

(Migrated from github.com)

in tauri+react project, this should work:

import { nodePolyfills } from "vite-plugin-node-polyfills"; plugins: [react(), tsconfigPaths(), nodePolyfills()],

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";
import { nodePolyfills } from "vite-plugin-node-polyfills";

const host = process.env.TAURI_DEV_HOST;

// https://vitejs.dev/config/
export default defineConfig(async () => ({
  plugins: [react(), tsconfigPaths(), nodePolyfills()],

  // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
  //
  // 1. prevent vite from obscuring rust errors
  clearScreen: false,
  // 2. tauri expects a fixed port, fail if that port is not available
  server: {
    port: 1420,
    strictPort: true,
    host: host || false,
    hmr: host
      ? {
          protocol: "ws",
          host,
          port: 1421,
        }
      : undefined,
    watch: {
      // 3. tell vite to ignore watching `src-tauri`
      ignored: ["**/src-tauri/**"],
    },
  },
}));

in tauri+react project, this should work: > import { nodePolyfills } from "vite-plugin-node-polyfills"; > plugins: [react(), tsconfigPaths(), nodePolyfills()], ```ts import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import tsconfigPaths from "vite-tsconfig-paths"; import { nodePolyfills } from "vite-plugin-node-polyfills"; const host = process.env.TAURI_DEV_HOST; // https://vitejs.dev/config/ export default defineConfig(async () => ({ plugins: [react(), tsconfigPaths(), nodePolyfills()], // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build` // // 1. prevent vite from obscuring rust errors clearScreen: false, // 2. tauri expects a fixed port, fail if that port is not available server: { port: 1420, strictPort: true, host: host || false, hmr: host ? { protocol: "ws", host, port: 1421, } : undefined, watch: { // 3. tell vite to ignore watching `src-tauri` ignored: ["**/src-tauri/**"], }, }, })); ```

nyrzeff commented

2025-08-04 17:58:28 +00:00

(Migrated from github.com)

None of the above worked for me. What worked though was installing https://www.npmjs.com/package/vite-plugin-node-polyfills. I also had to remove the node-globals-polyfill plugin or the dev environment would break.

EDIT: Someone had already mentioned this plugin but for some reason I didn't notice lol. I'll still leave this here in case someone has the same problem, for clarity's sake.

None of the above worked for me. What worked though was installing https://www.npmjs.com/package/vite-plugin-node-polyfills. I also had to remove the `node-globals-polyfill` plugin or the dev environment would break. EDIT: Someone had already mentioned this plugin but for some reason I didn't notice lol. I'll still leave this here in case someone has the same problem, for clarity's sake.

naranyala commented

2025-12-22 18:08:36 +00:00

(Migrated from github.com)

the author already solves the problem for me, the issue can be close

RyanGarber commented

2026-05-26 01:17:09 +00:00

(Migrated from github.com)

Using polyfills is not a solution — it's finicky at best if you have any real dependencies. It would not be difficult to fix this in any number of ways:

add exports that do not use Buffer
use anything other than Node's built-in Buffer class in general
or just make the call conditional to Buffer being defined...

If I have the time to do this I will make a PR... but the activity on this repo doesn't exactly scream confidence for it being accepted...

Edit: I found two alternatives with proper ESM exports and browser support:

https://github.com/ryoppippi/gray-matter-es — direct fork, a few stars, last commit 4 months ago
https://github.com/jxson/front-matter — different library, 600+ stars, last commit 6 years ago

Using polyfills is not a solution — it's finicky at best if you have any real dependencies. It would not be difficult to fix this in any number of ways: * add exports that do not use Buffer * use anything other than Node's built-in Buffer class in general * or just make the call conditional to Buffer being defined... If I have the time to do this I will make a PR... but the activity on this repo doesn't exactly scream confidence for it being accepted... Edit: I found two alternatives with proper ESM exports and browser support: 1. https://github.com/ryoppippi/gray-matter-es — direct fork, a few stars, last commit 4 months ago 2. https://github.com/jxson/front-matter — different library, 600+ stars, last commit 6 years ago

Rows
Columns

ReferenceError: Buffer is not defined #143