Process is not Defined - SvelteKit Import Error

[solanacryptodev]

So I'm using Shadow Drive (and Anchor JS) with SvelteKit and with both packages, I'm getting a process is not defined error I think because both packages use process, a server-side feature, that somehow gets triggered on import into a regular typescript file. I think this is because SvelteKit uses Vite. I saw in the Anchor issues section, one person solved the Anchor issue by using...

define: { 'process.env.ANCHOR_BROWSER': true },

...in the vite.config.js file. This works! I was wondering if anyone knows what process.env to pass in for ShadowDrive?

[tracy-codes]

Thanks for this report! I think typically this has been used with webpack bundlers which is why you're encountering this with vite. We will take a look and see what we can do to remedy. I really appreciate the detail in this report

[solanacryptodev]

Thanks for this report! I think typically this has been used with webpack bundlers which is why you're encountering this with vite. We will take a look and see what we can do to remedy. I really appreciate the detail in this report

Thanks for the response.

[tracy-codes]

I think this is a documentation thing, where we just need to spell it out for devs building with the sdk + svelte or any other framework using vite, to add this config in. Do you mind sharing the entire config? We'll work to update our documentation with a note for this.

[solanacryptodev]

I think this is a documentation thing, where we just need to spell it out for devs building with the sdk + svelte or any other framework using vite, to add this config in. Do you mind sharing the entire config? We'll work to update our documentation with a note for this.

I think I just got it actually lol...did a search of the repo and found process.env.SHDW_BROWSER. I added that to the config and it doesn't crash now. I still have to test the functions, but this is major progress. This is my current vite.config.js file...

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';

export default defineConfig({
	plugins: [sveltekit()],
	test: {
		include: ['src/**/*.{test,spec}.{js,ts}']
	},
	define: {
		'process.env.ANCHOR_BROWSER': true,
		'process.env.SHDW_BROWSER': true
	},
});

[solanacryptodev]

So I ran into an issue with Buffer as well being used in @shadow-drive/sdk/src/types/accounts/UnstakeInfo.ts. Said Buffer is not defined. I think NextJS handles some polyfill stuff automagically which may be why I didn't run into this issue when using SHDW with Next. I also had to run pnpm i buffer and pnpm i --save-dev vite-plugin-node-polyfills. Then add nodePolyfills() to vite.config.js. This is my new vite config and I'm getting no errors. I can import and use SHDW (note, I haven't tested any of the methods in SvelteKit yet).

export default defineConfig({
	plugins: [
		sveltekit(),
		nodePolyfills(),
	],
	test: {
		include: ['src/**/*.{test,spec}.{js,ts}']
	},
	define: {
		'process.env.ANCHOR_BROWSER': true,
		'process.env.SHDW_BROWSER': true,
	},
	resolve: {
		alias: {
			'buffer': 'buffer',
		}
	}
});

[tracy-codes]

@solanacryptodev Apologies for the delay here, I'm circling back as we're re-assessing our backlog. This is something we'll get on and fix!