vite.config.js node built-in polyfills

vite.config.js

// yarn add --dev @esbuild-plugins/node-globals-polyfill
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
// yarn add --dev @esbuild-plugins/node-modules-polyfill
import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'
// You don't need to add this to deps, it's included by @esbuild-plugins/node-modules-polyfill
import rollupNodePolyFill from 'rollup-plugin-node-polyfills'

export default {
    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
            // process and buffer are excluded because already managed
            // by node-globals-polyfill
            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'
        }
    },
    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
                rollupNodePolyFill()
            ]
        }
    }
}

    "buffer": "^6.0.3",
    "events": "^3.3.0",
    "process": "^0.11.10",
    "url": "^0.11.0"

Cheers mate, here you have it https://stackblitz.com/edit/vitejs-vite-cizeph?file=vite.config.ts&terminal=dev

    "buffer": "^6.0.3",
    "events": "^3.3.0",
    "process": "^0.11.10",
    "url": "^0.11.0"

Cheers mate, here you have it https://stackblitz.com/edit/vitejs-vite-cizeph?file=vite.config.ts&terminal=dev

You can just install the util package in your code with npm install util. It then shows a different error related to TypeScript. As I'm not familiar with TypeScript unfortunately, I can't help you further than that

https://github.com/sodatea/vite-plugin-node-stdlib-browser

This worked for the Uncaught TypeError: util.inherits is not a function. error, thank you!

https://github.com/sodatea/vite-plugin-node-stdlib-browser

This worked for the Uncaught TypeError: util.inherits is not a function. error, thank you!

Does not work for me

// vite.config.js
import { defineConfig } from "vite";
import nodePolyfills from "vite-plugin-node-stdlib-browser";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
    plugins: [nodePolyfills(), tsconfigPaths(), react()],
});

error

✘ [ERROR] The injected path "/Users/marian/code/OzoneV2/app-web/node_modules/node-stdlib-browser/helpers/esbuild/shim.js" cannot be marked as external

Build failed with 1 error:
error: The injected path "/Users/marian/code/OzoneV2/app-web/node_modules/node-stdlib-browser/helpers/esbuild/shim.js" cannot be marked as external
Failed to load url /node_modules/util/url (resolved id: /node_modules/util/url). Does the file exist?
Failed to load url /node_modules/util/searchAndFilters (resolved id: /node_modules/util/searchAndFilters). Does the file exist?
Failed to load url /node_modules/util/markerFiller (resolved id: /node_modules/util/markerFiller). Does the file exist?
Failed to load url /node_modules/util/markerFiller (resolved id: /node_modules/util/markerFiller). Does the file exist? (x2)
Failed to load url /node_modules/util/markerFiller (resolved id: /node_modules/util/markerFiller). Does the file exist? (x3)

found a solution that works for me

        "@esbuild-plugins/node-globals-polyfill": "0.2.3",
        "@esbuild-plugins/node-modules-polyfill": "0.2.2",
        "rollup-plugin-node-polyfills": "^0.2.1",
        "util": "^0.12.5",

vite.config.ts

// yarn add --dev @esbuild-plugins/node-globals-polyfill
import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
// yarn add --dev @esbuild-plugins/node-modules-polyfill
import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";
// You don't need to add this to deps, it's included by @esbuild-plugins/node-modules-polyfill
import rollupNodePolyFill from "rollup-plugin-node-polyfills";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";

export default {
    plugins: [
        react(),
        tsconfigPaths(),
        {
            name: "fix-node-globals-polyfill",
            setup(build) {
                build.onResolve({ filter: /util\.js/ }, ({ path }) => ({ path }));
            },
        },
    ],
    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
            // process and buffer are excluded because already managed
            // by node-globals-polyfill
            util: "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",
        },
    },
    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
                rollupNodePolyFill(),
            ],
        },
    },
};

found a solution that works for me

        "@esbuild-plugins/node-globals-polyfill": "0.2.3",
        "@esbuild-plugins/node-modules-polyfill": "0.2.2",
        "rollup-plugin-node-polyfills": "^0.2.1",
        "util": "^0.12.5",

vite.config.ts

// yarn add --dev @esbuild-plugins/node-globals-polyfill
import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
// yarn add --dev @esbuild-plugins/node-modules-polyfill
import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";
// You don't need to add this to deps, it's included by @esbuild-plugins/node-modules-polyfill
import rollupNodePolyFill from "rollup-plugin-node-polyfills";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";

export default {
    plugins: [
        react(),
        tsconfigPaths(),
        {
            name: "fix-node-globals-polyfill",
            setup(build) {
                build.onResolve({ filter: /util\.js/ }, ({ path }) => ({ path }));
            },
        },
    ],
    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
            // process and buffer are excluded because already managed
            // by node-globals-polyfill
            util: "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",
        },
    },
    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
                rollupNodePolyFill(),
            ],
        },
    },
};

This configuration has gotten me very close. However, I have odic-client-ts as a dep and I'm getting the following error. Any idea on how to fix this?

Failed to load url rollup-plugin-node-polyfills/polyfills/constants/odic-config (resolved id: rollup-plugin-node-polyfills/polyfills/constants/odic-config). Does the file exist?

Had the same problem in Nuxt3 after upgrading to 3.1.1
I was already using polyfills:

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

but after upgrading Nuxt (which comes with Vite update) I got error:
✘ [ERROR] The injected path "/Users/../node_modules/@esbuild-plugins/node-globals-polyfill/_virtual-process-polyfill_.js" cannot be resolved

Everything is back in the right order after upgrading dev dependencies to:

    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",

Thanks @Terkea 👍

try installing the standalone module and replacing it in the vite.config.js
that's how I got around the util issue which is the same

import rollupNodePolyFill from "rollup-plugin-node-polyfills";

`build: {
outDir: resolve(devPath, 'renderer'),

rollupOptions: {
plugins: [
  injectProcessEnvPlugin({
    NODE_ENV: 'production',
    platform: process.platform,
  }),
  rollupNodePolyFill(),
],
...

},
},`

rollupNodePolyFill doesn't work here, I'm using electron-vite^1.0.12

I got an error by ts:

Type '{ name: string; resolveId(importee: string, importer: string): { id: any; moduleSideEffects: boolean; } | null; load(id: string): string | undefined; transform(code: string, id: string): any; }' is not assignable to type 'false | Plugin | null | undefined'. Type '{ name: string; resolveId(importee: string, importer: string): { id: any; moduleSideEffects: boolean; } | null; load(id: string): string | undefined; transform(code: string, id: string): any; }' is not assignable to type 'Plugin'. Types of property 'resolveId' are incompatible. Type '(importee: string, importer: string) => { id: any; moduleSideEffects: boolean; } | null' is not assignable to type 'ObjectHook<(this: PluginContext, source: string, importer: string | undefined, options: { custom?: CustomPluginOptions | undefined; isEntry: boolean; }) => ResolveIdResult | Promise<...>, {}> | undefined'. Type '(importee: string, importer: string) => { id: any; moduleSideEffects: boolean; } | null' is not assignable to type '(this: PluginContext, source: string, importer: string | undefined, options: { custom?: CustomPluginOptions | undefined; isEntry: boolean; }) => ResolveIdResult | Promise<...>'. Types of parameters 'importer' and 'importer' are incompatible. Type 'string | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'.ts(2322)

Can someone help me?

import rollupNodePolyFill from "rollup-plugin-node-polyfills";

`build: { outDir: resolve(devPath, 'renderer'),

rollupOptions: {
plugins: [
  injectProcessEnvPlugin({
    NODE_ENV: 'production',
    platform: process.platform,
  }),
  rollupNodePolyFill(),
],
...

}, },`

rollupNodePolyFill doesn't work here, I'm using electron-vite^1.0.12

I got an error by ts:

Type '{ name: string; resolveId(importee: string, importer: string): { id: any; moduleSideEffects: boolean; } | null; load(id: string): string | undefined; transform(code: string, id: string): any; }' is not assignable to type 'false | Plugin | null | undefined'. Type '{ name: string; resolveId(importee: string, importer: string): { id: any; moduleSideEffects: boolean; } | null; load(id: string): string | undefined; transform(code: string, id: string): any; }' is not assignable to type 'Plugin'. Types of property 'resolveId' are incompatible. Type '(importee: string, importer: string) => { id: any; moduleSideEffects: boolean; } | null' is not assignable to type 'ObjectHook<(this: PluginContext, source: string, importer: string | undefined, options: { custom?: CustomPluginOptions | undefined; isEntry: boolean; }) => ResolveIdResult | Promise<...>, {}> | undefined'. Type '(importee: string, importer: string) => { id: any; moduleSideEffects: boolean; } | null' is not assignable to type '(this: PluginContext, source: string, importer: string | undefined, options: { custom?: CustomPluginOptions | undefined; isEntry: boolean; }) => ResolveIdResult | Promise<...>'. Types of parameters 'importer' and 'importer' are incompatible. Type 'string | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'.ts(2322)

Can someone help me?

CodeSandbox?

I solve it with:

electron.vite.config.ts
`
build: {
outDir: resolve(devPath, 'renderer'),

  rollupOptions: {
    plugins: [
      injectProcessEnvPlugin({
        NODE_ENV: 'production',
        platform: process.platform,
      }),
      rollupNodePolyFill,
    ],
  },
},

`
and this:

index.html
<script> global = globalThis; </script>

rollup-plugin-node-polyfills

@Terkea Hello, I use yours and get this error:

Error: Build failed with 2 errors:
error: Could not read from file: /root/zzb/node_modules/@esbuild-plugins/node-globals-polyfill/_virtual-process-polyfill_.js
error: Could not read from file: /root/zzb/node_modules/@esbuild-plugins/node-globals-polyfill/_virtual-buffer-polyfill_.js
    at failureErrorWithLog (/root/zzb/node_modules/esbuild/lib/main.js:1566:15)
    at /root/zzb/node_modules/esbuild/lib/main.js:1024:28
    at runOnEndCallbacks (/root/zzb/node_modules/esbuild/lib/main.js:1438:61)
    at buildResponseToResult (/root/zzb/node_modules/esbuild/lib/main.js:1022:7)
    at /root/zzb/node_modules/esbuild/lib/main.js:1134:14
    at responseCallbacks.<computed> (/root/zzb/node_modules/esbuild/lib/main.js:671:9)
    at handleIncomingPacket (/root/zzb/node_modules/esbuild/lib/main.js:726:9)
    at Socket.readFromStdout (/root/zzb/node_modules/esbuild/lib/main.js:647:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:297:9)
    at Readable.push (node:internal/streams/readable:234:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

rollup-plugin-node-polyfills

@Terkea Hello, I use yours and get this error:

Error: Build failed with 2 errors:
error: Could not read from file: /root/zzb/node_modules/@esbuild-plugins/node-globals-polyfill/_virtual-process-polyfill_.js
error: Could not read from file: /root/zzb/node_modules/@esbuild-plugins/node-globals-polyfill/_virtual-buffer-polyfill_.js
    at failureErrorWithLog (/root/zzb/node_modules/esbuild/lib/main.js:1566:15)
    at /root/zzb/node_modules/esbuild/lib/main.js:1024:28
    at runOnEndCallbacks (/root/zzb/node_modules/esbuild/lib/main.js:1438:61)
    at buildResponseToResult (/root/zzb/node_modules/esbuild/lib/main.js:1022:7)
    at /root/zzb/node_modules/esbuild/lib/main.js:1134:14
    at responseCallbacks.<computed> (/root/zzb/node_modules/esbuild/lib/main.js:671:9)
    at handleIncomingPacket (/root/zzb/node_modules/esbuild/lib/main.js:726:9)
    at Socket.readFromStdout (/root/zzb/node_modules/esbuild/lib/main.js:647:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:297:9)
    at Readable.push (node:internal/streams/readable:234:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

Update to Vite 4.2 solved the issue for me.

Have a project with a WebRTC video player component and we are receiving the following error:

this.once is not a function

Seems to be an issue with how Vite handles transforms around Duplex.once and _readable_stream.

Here is a GitHub thread where someone was discussing a similar issue:
nodejs/readable-stream#315 (comment)

Has anyone ran into this or have a solution for it?
I've tried a variety of solutions in this thread and other GitHub threads... none have worked so far. I am on the latest version of Vite ("vite": "^4.3.4",).

Anyone know how to handle cytpo ? It seems to work in build mode but can't get it to work in dev with crypto-browserify

this worked. thanks!