search

jonschlinkert / gray-matter

Smarter YAML front matter parser, used by metalsmith, Gatsby, Netlify, Assemble, mapbox-gl, phenomic, vuejs vitepress, TinaCMS, Shopify Polaris, Ant Design, Astro, hashicorp, garden, slidev, saber, sourcegraph, and many others. Simple to use, and battle tested. Parses YAML by default but can also parse JSON Front Matter, Coffee Front Matter, TOML Front Matter, and has support for custom parsers. Please follow gray-matter's author: https://github.com/jonschlinkert
https://github.com/jonschlinkert
MIT License
3.9k stars 137 forks source link

ReferenceError: Buffer is not defined #143

Open tomatobybike opened 2 years ago

tomatobybike commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

segevfiner commented 1 year ago

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 commented 1 year ago

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

andrewspy commented 1 year ago

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

transtone commented 4 months ago

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

shubham4538 commented 3 months ago

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.