Skip to main content

​
Vite.js requires global and process polyfills

If you’re using Vite.js with react and using the Dynamic SDK you may get this error in your console: 
util.js:109 Uncaught ReferenceError: process is not defined
This is because one of the many libraries that our SDK depends on uses the process module which is natively not in the browser environment nor is it automatically polyfilled by Vite.

​
Polyfill process using vite.config.js

To fix this we must modify the vite.config.js file to modify esbuild to polyfill this for us. Here is a minimal example config: 
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";

export default defineConfig({
  optimizeDeps: {
    esbuildOptions: {
      // Enable esbuild polyfill plugins
      plugins: [
        NodeGlobalsPolyfillPlugin({
          process: true,
        }),
        NodeModulesPolyfillPlugin(),
      ],
    },
  },
  plugins: [react()],
});
Warning: You may still see a console error React Static Flag Error. At this time, you can ignore this error in local development environment.