Skip to main content

Bundler Polyfill issues - Svelte with Vite

When developing a new Embedded Wallets project with Svelte and Vite, you may encounter bundler issues due to missing polyfills. This commonly occurs with packages like eccrypto which rely on Node modules not present in the browser environment. Directly adding these modules to your package can solve the issue but may lead to a larger bundle size, affecting load times and user experience.

It's essential to recognize that the required Node polyfills should only be included during development and testing, and the bundler should be instructed to exclude them from the production build.

The following guide provides instructions for adding the necessary polyfills in a Svelte project using Vite.

Step 1: Install the missing modules​

First, identify the missing libraries in your build. For integrating Web3Auth with Svelte, you will need to polyfill buffer and process. For other libraries, use an alternative like the empty-module to prevent build warnings.

npm install --save-dev buffer process vite-plugin-node-polyfills
warning

If you're using any other blockchain library alongside Web3Auth, it's possible that you might need to polyfill more libraries. Typically, the libraries like crypto-browserify, stream-browserify, browserify-zlib, assert, stream-http, https-browserify, os-browserify, url are the ones that might be required, with crypto-browserify and url being the most common polyfills.

Step 2: Update your vite.config.js​

Modify your Vite configuration to integrate the polyfills with Svelte as follows:

import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vitest/config'
import { nodePolyfills } from 'vite-plugin-node-polyfills'

export default defineConfig({
  plugins: [
    nodePolyfills({
      exclude: ['fs'],
      globals: {
        Buffer: true,
        global: true,
        process: true,
      },
      protocolImports: true,
    }),
    sveltekit(),
  ],
  optimizeDeps: {
    include: ['dayjs/plugin/relativeTime.js', 'dayjs', '@web3auth/ethereum-provider'],
  },
  test: {
    include: ['src/**/*.{test,spec}.{js,ts}'],
  },
})

This configuration sets up the necessary aliases and defines globals for the browser environment, ensuring compatibility and reducing bundle size.

Step 3: Address additional dependency issues​

If there are additional dependencies that need to be polyfilled, consider adding them to the include array in the optimizeDeps section of the Vite config. Test your application to ensure that all functionalities work as expected after the polyfills are added.

By following these steps, you should be able to resolve bundler polyfill issues in your Svelte and Vite Embedded Wallets project, leading to a more efficient build and a smoother user experience.

On this page