React Issues
Vite.js polyfills necessary for Dynamic SDK
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
After applying the polyfill, you may still see an error for React Static Flag Error
. This is currently expected. To learn more, checkout the troubleshooting page React Static Flag Error. At this time, you can ignore this error in local development environment.
Was this page helpful?