npm install vite-plugin-node-polyfills

// vite.config.ts
import { nodePolyfills } from 'vite-plugin-node-polyfills';

export default defineConfig({
  plugins: [
    nodePolyfills({
      include: ['buffer', 'crypto', 'stream', 'util'],
    }),
  ],
});

// Add to top of your entry file
import { Buffer } from 'buffer';
if (typeof window !== 'undefined') {
  window.Buffer = Buffer;
}

// vite.config.ts
export default defineConfig({
  define: {
    global: 'globalThis',
  },
});

{
  "compilerOptions": {
    "moduleResolution": "bundler", // or "node16"
    "esModuleInterop": true
  }
}

// ❌ May cause issues with App Router
import { config, auth } from '@imtbl/sdk';

// ✅ Works correctly - use modular packages
import { Auth } from '@imtbl/auth';
import { connectWallet } from '@imtbl/wallet';
import { Environment } from '@imtbl/config';

const nextConfig = {
  experimental: {
    esmExternals: false,
  },
};

// ❌ Imports everything
import { auth, orderbook } from '@imtbl/sdk';

// ✅ Imports only what you need
import { Auth } from '@imtbl/auth';
import { Orderbook } from '@imtbl/orderbook';

// ❌ Wrong - trailing slash mismatch
redirectUri: 'http://localhost:3000/callback/'

// ✅ Correct - matches Hub config exactly
redirectUri: 'http://localhost:3000/callback'

// ❌ Wrong - called on page load
useEffect(() => {
  auth.login(); // Blocked!
}, []);

// ✅ Correct - triggered by user click
<button onClick={() => auth.login()}>
  Login
</button>

// app/callback/page.tsx
useEffect(() => {
  auth.loginCallback()
    .then(() => router.push('/'))
    .catch(console.error);
}, []);

try {
  await walletClient.sendTransaction({ to, value });
} catch (error) {
  if (error.name === 'UserRejectedRequestError') {
    // User cancelled - show friendly message
    return;
  }
  throw error;
}

import { formatEther } from 'viem';

const balance = await publicClient.getBalance({ address });
console.log('Balance:', formatEther(balance), 'IMX');

const pendingNonce = await publicClient.getTransactionCount({
  address,
  blockTag: 'pending',
});

// ❌ Wrong - creates new instance every call
function getAuth() {
  return new Auth({ ... });
}

// ✅ Correct - singleton pattern
let auth: Auth | null = null;
function getAuth() {
  if (!auth) {
    auth = new Auth({ ... });
  }
  return auth;
}

// In browser console
localStorage.setItem('debug', 'imtbl:*');