I'm getting this build error with vite and sveltekit using adapter-node

I'm not sure why it won't build since it relies on node to server the client.

dev works fine

'Buffer' is not exported by __vite-browser-external:buffer

I tried polyfills but they don't work.

            optimizeDeps: {
                esbuildOptions: {
                    // Node.js global to browser globalThis
                    define: {
                        global: 'globalThis'
                    },
                    // Enable esbuild polyfill plugins
                    plugins: [
                        NodeGlobalsPolyfillPlugin({
                            process: true,
                            buffer: true,
                            webworkers: true,
                        }),
                        NodeModulesPolyfillPlugin()
                    ]
                }
            },
            build: {
                minify: true,
                rollupOptions: {
                    plugins: [
                        // Enable rollup polyfills plugin
                        // used during production bundling
                        rollupNodePolyFill()
                    ]
                }
            }

I'm getting this build error with vite and sveltekit using adapter-node

I'm not sure why it won't build since it relies on node to server the client.

dev works fine

'Buffer' is not exported by __vite-browser-external:buffer

I tried polyfills but they don't work.

            optimizeDeps: {
                esbuildOptions: {
                    // Node.js global to browser globalThis
                    define: {
                        global: 'globalThis'
                    },
                    // Enable esbuild polyfill plugins
                    plugins: [
                        NodeGlobalsPolyfillPlugin({
                            process: true,
                            buffer: true,
                            webworkers: true,
                        }),
                        NodeModulesPolyfillPlugin()
                    ]
                }
            },
            build: {
                minify: true,
                rollupOptions: {
                    plugins: [
                        // Enable rollup polyfills plugin
                        // used during production bundling
                        rollupNodePolyFill()
                    ]
                }
            }

• javascript
• svelte
• vite
• sveltekit

4 Answers 4

I solved it by adding the right aliases (including buffer and process) to config.vite.ts. That's how mine looks like:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tsconfigPaths from 'vite-tsconfig-paths'
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'
import rollupNodePolyFill from 'rollup-plugin-node-polyfills'

export default defineConfig({
    plugins: [react(), tsconfigPaths()],
    server: {
        port: 3001,
        open: true
    },
    resolve: {
        alias: {
            // This Rollup aliases are extracted from @esbuild-plugins/node-modules-polyfill, 
            // see https://github.com/remorses/esbuild-plugins/blob/master/node-modules-polyfill/src/polyfills.ts
            util: 'rollup-plugin-node-polyfills/polyfills/util',
            sys: 'util',
            events: 'rollup-plugin-node-polyfills/polyfills/events',
            stream: 'rollup-plugin-node-polyfills/polyfills/stream',
            path: 'rollup-plugin-node-polyfills/polyfills/path',
            querystring: 'rollup-plugin-node-polyfills/polyfills/qs',
            punycode: 'rollup-plugin-node-polyfills/polyfills/punycode',
            url: 'rollup-plugin-node-polyfills/polyfills/url',
            string_decoder:
                'rollup-plugin-node-polyfills/polyfills/string-decoder',
            http: 'rollup-plugin-node-polyfills/polyfills/http',
            https: 'rollup-plugin-node-polyfills/polyfills/http',
            os: 'rollup-plugin-node-polyfills/polyfills/os',
            assert: 'rollup-plugin-node-polyfills/polyfills/assert',
            constants: 'rollup-plugin-node-polyfills/polyfills/constants',
            _stream_duplex:
                'rollup-plugin-node-polyfills/polyfills/readable-stream/duplex',
            _stream_passthrough:
                'rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough',
            _stream_readable:
                'rollup-plugin-node-polyfills/polyfills/readable-stream/readable',
            _stream_writable:
                'rollup-plugin-node-polyfills/polyfills/readable-stream/writable',
            _stream_transform:
                'rollup-plugin-node-polyfills/polyfills/readable-stream/transform',
            timers: 'rollup-plugin-node-polyfills/polyfills/timers',
            console: 'rollup-plugin-node-polyfills/polyfills/console',
            vm: 'rollup-plugin-node-polyfills/polyfills/vm',
            zlib: 'rollup-plugin-node-polyfills/polyfills/zlib',
            tty: 'rollup-plugin-node-polyfills/polyfills/tty',
            domain: 'rollup-plugin-node-polyfills/polyfills/domain',
            buffer: 'rollup-plugin-node-polyfills/polyfills/buffer-es6',
            process: 'rollup-plugin-node-polyfills/polyfills/process-es6'
        }
    },
    optimizeDeps: {
        esbuildOptions: {
            // Node.js global to browser globalThis
            define: {
                global: 'globalThis'
            },
            // Enable esbuild polyfill plugins
            plugins: [
                NodeGlobalsPolyfillPlugin({
                    process: true,
                    buffer: true
                }),
                NodeModulesPolyfillPlugin()
            ]
        }
    },
    build: {
        rollupOptions: {
            plugins: [
                // Enable rollup polyfills plugin
                // used during production bundling
                // @ts-ignore
                rollupNodePolyFill(),
            ]
        }
    }
})

build: {
        rollupOptions: {
            plugins: [inject({ Buffer: ['Buffer', 'Buffer'] })],
        },
    },

This works with npm i -D buffer

I got this error without using polyfill. Fixed it with:

npm install -D buffer

// vite.config.js
build: {
    commonjsOptions: {
        include: ['node_modules/buffer/index.js']
    }
}

This is related to a reported issue on vite https://github.com/vitejs/vite/issues/3024

Or if you need to apply this to all .js dependencies:

// vite.config.js
build: {
    commonjsOptions: {
        include: ['node_modules/**/*.js']
    }
}

Beside mr @chovy 's answer, there is another simple way if you want to config from esbuild instead of rollup options.

npm install -D buffer

import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'

export default defineConfig({
...
 optimizeDeps: {
    esbuildOptions: {
      // Node.js global to browser globalThis
      define: {
        global: 'globalThis'
      },
      // Enable esbuild polyfill plugins
      plugins: [
        NodeGlobalsPolyfillPlugin({
          process: true,
          buffer: true
        })
      ]
    },
  },
...
})

Another approach is to use alias resolve

npm install rollup-plugin-node-polyfills

then

// vite.config.ts
resolve: {
    alias: {
  ...
      buffer: 'rollup-plugin-node-polyfills/polyfills/buffer-es6',
      process: 'rollup-plugin-node-polyfills/polyfills/process-es6'
    }
  },