ReferenceError: Buffer is not defined

[tomatobybike]

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

[tomatobybike]

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
                })
            ]
        }
    }
}

[TeemuKoivisto]

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

[segevfiner]

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

[segevfiner]

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

[andrewspy]

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

[transtone]

if use nuxtjs, see nuxt/nuxt#25016

[shubham4538]

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.

[s-light]

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(),
            ],
        },
    };
});