In my Vite project, I am depending on a module that makes use of the process Node global in one of its functions. I don't call this function from my code, but the Vite dev server still gives me this error when I import the module:

Uncaught ReferenceError: process is not defined

Interestingly, I don't see this error when I create a production build.

How can I polyfill process with a no-op so that the Vite dev server stops failing?

In my Vite project, I am depending on a module that makes use of the process Node global in one of its functions. I don't call this function from my code, but the Vite dev server still gives me this error when I import the module:

Uncaught ReferenceError: process is not defined

Interestingly, I don't see this error when I create a production build.

How can I polyfill process with a no-op so that the Vite dev server stops failing?

• javascript
• node.js
• vite
• polyfills

5 Answers 5

I had the same issue today in a React project using rollup + vite and here's how I solved it, using this Medium piece by Fabiano Taioli.

Vite needs Node.js polyfills

You need to add some polyfill plugins to allow Node globals, such as process. Fortunately, you can simply edit (or create) the vite.config.js.

Example vite.config.js

Below is an example which includes using NodeGlobalsPolyfillPlugin to polyfill process. It also includes many other node globals so remove at your leisure.

import { defineConfig } from 'vite';
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill';
import ReactPlugin from 'vite-preset-react';
import rollupNodePolyFill from 'rollup-plugin-node-polyfills'
// https://vitejs.dev/config/
export default defineConfig({
  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(),
      ],
    },
  },
  plugins: [
    ReactPlugin({
      injectReact: false,
    }),
    rollupNodePolyFill(),
  ],
});

Development dependencies required

To make the above example work as is you'll need to add some dependencies. In particular:

yarn add --dev vite-preset-react
yarn add --dev @esbuild-plugins/node-modules-polyfill
yarn add --dev @esbuild-plugins/node-globals-polyfill

I'm using node-stdlib-browser, and it works really well for me.

And the following is my final vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import nodeStdlibBrowser from 'node-stdlib-browser'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import inject from '@rollup/plugin-inject'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        // https://github.com/antfu/unplugin-auto-import#configuration
        AutoImport({
            dts: 'src/auto-import.d.ts',
            imports: ['vue', 'vue-router'],
            eslintrc: {
                enabled: true,
            },
        }),
        // https://github.com/antfu/unplugin-vue-components#configuration
        Components({
            dts: 'src/components.d.ts',
        }),
        // https://github.com/niksy/node-stdlib-browser#vite
        {
            ...inject({
                global: [require.resolve('node-stdlib-browser/helpers/esbuild/shim'), 'global'],
                process: [require.resolve('node-stdlib-browser/helpers/esbuild/shim'), 'process'],
                Buffer: [require.resolve('node-stdlib-browser/helpers/esbuild/shim'), 'Buffer'],
            }),
            enforce: 'post',
        },
    ],
    resolve: {
        alias: { '@': path.resolve(__dirname, 'src'), ...nodeStdlibBrowser },
    },
    optimizeDeps: {
        esbuildOptions: {
            target: 'esnext', // Enable Big integer literals
        },
    },
    build: {
        target: 'esnext', // Enable Big integer literals
        commonjsOptions: {
            transformMixedEsModules: true, // Enable @walletconnect/web3-provider which has some code in CommonJS
        },
    },
})

In 2024 I would advise usage of vite-plugin-node-polyfills package.

Pros: It's much easier to use, configure and understand

Cons: Has lot of dev dependencies

Steps:

1.) Add "vite-plugin-node-polyfills" as dev dependency:

# npm
npm install --save-dev vite-plugin-node-polyfills

# pnpm
pnpm install --save-dev vite-plugin-node-polyfills

# yarn
yarn add --dev vite-plugin-node-polyfills

2.) Open your Vite config file (e.g. "vite.config.js") and add "nodePolyfills" as a plugin from "vite-plugin-node-polyfills" with this config:

import { defineConfig } from 'vite'
import { nodePolyfills } from 'vite-plugin-node-polyfills'

export default defineConfig({
  // ... your other config
  plugins: [
    // ... your other plugins
    nodePolyfills({
      // To add only specific polyfills, add them here. If no option is passed, adds all polyfills
      include: ['process'],
      globals: { global: true, process: true },
    }),
  ],
})

Why is this all needed?

Vite does not include Node's Core Modules. With this package you can polyfill any Node.js Built-in Module, polyfill specific globals or override the default polyfills for specific modules. Check package on npmjs

An alternative is adding to your index.html

<script type="module">
  import process from 'process';
  window.process = process;
</script>

Please use 'esbuild-plugin-polyfill-node' plugin. https://npm.io/package/esbuild-plugin-polyfill-node This solved the problem for me, and NO NEEDED of manually adding and assigning global = window in script tag.