Polyfill issue - I was trying to use polyfills in Svelte and still couldn’t get it to work

Help - Plug n Play PnP Web SDKs
1

I was trying to use polyfills and still couldn’t get it to work, maybe you can double-check to see if it works for my side. I have to revisit it tomorrow as I’m still working on the react build for the company but we are switching over to svelte as react has been too much of a hassle and we’re able to developer faster with sveltekit. Plus the out of the box typescript support has been quite attractive especially with many projects divulging more into account abstraction.

I haven’t used Wagmi yet, the project I’m using is still on ether6 for svelte (even though so many of the third party libraries do not support it and switching over to wagmi/viem)

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import path from 'path';
// import commonjs from '@rollup/plugin-commonjs';
import {NodeGlobalsPolyfillPlugin} from "@esbuild-plugins/node-globals-polyfill";


export default defineConfig({
    plugins: [
        sveltekit()
    ],
    optimizeDeps: {
        esbuildOptions: {
            define: {
                global: "globalThis",
            },
            plugins: [
                NodeGlobalsPolyfillPlugin({
                    process: true,
                    buffer: true,
                    crypto: true,
                    assert: true,
                    http: true,
                    https: true,
                    os: true,
                    url: true,
                    zlib: true,
                    stream: true,
                    _stream_duplex: true,
                    _stream_passthrough: true,
                    _stream_readable: true,
                    _stream_transform: true,
                }),
            ],
        },
    },
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src'),
            'process/browser': 'process-es6/browser',
            zlib: 'browserify-zlib',
            stream: 'stream-browserify',
            util: 'util/',
            buffer: 'buffer/',
            assert: 'assert/',
            "web3-providers-ws": "web3-providers-ws/",
            url: 'url/',
            https: 'https-browserify',
            http: 'stream-http',
            crypto: 'crypto-browserify',
            os: 'os-browserify/browser',
        }
    },

    define: {
        'process.env': {
            NODE_ENV: '"development"' // or '"production"', depending on your needs
        },
        // global: 'window'
    }
});
2 
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}']
	}
});

heres my vite config goodluck

3 Likes
3

Thanks! I’ll try this tomorrow and let you know

4

Thanks for sharing @josephrios56