Skip to main content

​
Vite.js requires global and process polyfills

If you’re using Vite.js with React and the Layerswap Widget, you may encounter this error in your console: 
util.js:109 Uncaught ReferenceError: process is not defined
This happens because some libraries that the widget depends on use the process module, which is not available in the browser environment and is not automatically polyfilled by Vite.

​
Polyfill process using vite.config.js

To resolve this, modify your vite.config.js file with the following plugins: 
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
import { nodePolyfills } from 'vite-plugin-node-polyfills'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), nodePolyfills()],
  esbuild: {
    target: 'esnext',
  },

  server: {
    port: 3000,
    open: true,
  },
})

​
Install the required packages

Make sure to install the polyfill plugins: 
npm install -D vite-plugin-node-polyfills @vitejs/plugin-react

​
Example Project

For a complete working example of a Vite.js project with the Layerswap Widget, check out our Vite example in the monorepo.