Error: Module not found: Can't resolve 'fs' in next.js client components

[clar1k]

Main Dependencies: "next": "^15.2.3", "@drift-labs/sdk": "^2.120.0-beta.1",

Code sandbox where error reproduced

Code Sandbox

Description

I get error "Module not found: Can't resolve 'fs'" if i use DriftClient on client side on client of application in next.js I get same error in the vite repo also.

Full screenshot of the error i am getting

Code where i create drift client

"use client";
import { Connection, Keypair } from "@solana/web3.js";
import { DriftClient, Wallet } from "@drift-labs/sdk";
import { env } from "@/env";
const connection = new Connection(env.NEXT_PUBLIC_RPC_URL, "confirmed");

const keypair = Keypair.generate();

export const wallet = new Wallet(keypair);

export const driftClient = new DriftClient({
  connection,
  wallet,
  env: "mainnet-beta",
});

await driftClient.subscribe();

[clar1k]

I did hack some things with the SDK. The main issue was in the "@coral-xyz/anchor-30" package because it works only in server environment. So i delete this dependency and all code that depended on it. But for now the code works fine on the client You can view the source code here

Github Repo

[Dr-yellow]

hey~ bro I know how to solve this problem

next.config.ts

webpack: (config, { isServer }) => { if (!isServer) { config.resolve.fallback = { fs: false, tls: false, net: false, // Disables the polyfill for 'net' module dgram: false, // Disables the polyfill for 'dgram' module dns: false, // Disables the polyfill for 'dgram' module }; } return config; },

[joeblau]

This issue still exists

[joeblau]

I did hack some things with the SDK. The main issue was in the "@coral-xyz/anchor-30" package because it works only in server environment. So i delete this dependency and all code that depended on it. But for now the code works fine on the client You can view the source code here

Github Repo

How did you import this?