svelte-issues.mdx

title	Bundler Polyfill issues - Svelte with Vite
image	img/metamaskog.jpg
sidebar_label	Svelte with Vite polyfill issues
description	Bundler Polyfill Issues - Svelte with Vite | Embedded Wallets

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.