Using SDK in browser env (Vite)

[kelreel]

I can't use sdk in a browser environment with React & Vite.

You can also try to try to make app from vite-react-typescript template and catch the following errors:

{
    "dependencies": {
      "@drift-labs/sdk": "^2.100.0-beta.8",
      "@solana/web3.js": "^1.95.4",
      "bs58": "^6.0.0",
      "react": "^18.3.1",
      "react-dom": "^18.3.1",
      "rpc-websockets": "7.10.0"
    },
    "devDependencies": {
      "@eslint/js": "^9.13.0",
      "@types/react": "^18.3.12",
      "@types/react-dom": "^18.3.1",
      "@vitejs/plugin-react": "^4.3.3",
      "eslint": "^9.13.0",
      "eslint-plugin-react-hooks": "^5.0.0",
      "eslint-plugin-react-refresh": "^0.4.14",
      "globals": "^15.11.0",
      "typescript": "~5.6.2",
      "typescript-eslint": "^8.11.0",
      "vite": "^5.4.10"
    }
}

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vite.dev/config/
export default defineConfig({
  define: {
    "process.env": {}, // fix "process not defined"
  },
  plugins: [react()],
  // optimizeDeps: {
  //   exclude: ["@drift-labs/sdk"],
  // },
});

// App.tsx

  const connection = new Connection("https://api.mainnet-beta.solana.com");

  const keypair = Keypair.fromSecretKey(
    bs58.decode(
      "secret key"
    )
  );

  console.log(keypair);
  const wallet = keypair ? new Wallet(keypair) : null;

  console.log(wallet);

The following error occurs here:

With excluded Vite optimized deps:

Seems like Node dependencies still exists in sdk browser version.
I also plan to use the DriftClient in the browser, do you think it will work? 😅

[LukasDeco]

@kelreel do you have a url for the app you could share? a github repo would also be great. We'll need to see the full App.tsx to see how the imports are written.

To answer your question about using the DriftClient in the browser: yes it should work in the browser.