> For the complete documentation index, see [llms.txt](/llms.txt).

# 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[​](#step-1-install-the-missing-modules "Direct link to 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
- Yarn
- pnpm
- Bun

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

```

```
yarn add --dev buffer process vite-plugin-node-polyfills

```

```
pnpm add --save-dev buffer process vite-plugin-node-polyfills

```

```
bun add --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`[​](#step-2-update-your-viteconfigjs "Direct link to step-2-update-your-viteconfigjs")

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[​](#step-3-address-additional-dependency-issues "Direct link to 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.