Error Property "Buffer" doesn't exist when import functions

[phuongit0301]

Hi Support Team

Im using expo with library below but Im facing issues Property "Buffer" doesn't exist when import functions when I import import { EVM, createConfig } from '@lifi/sdk';. Can you help me about that?

"@lifi/data-types": "^5.19.0",
"@lifi/sdk": "^3.4.4",
"@lifi/wallet-management": "^3.4.7",
"wagmi": "^2.13.3"
"viem": "^2.21.53",
"react": "18.3.1",
"react-native": "0.76.3",
"expo": "^52.0.17",

- CustomWagmiProvider.tsx
`import { EVM, createConfig } from '@lifi/sdk';
import { getWalletClient, switchChain } from '@wagmi/core';
import { type FC, type PropsWithChildren } from 'react';
import { createClient, http } from 'viem';
import {
mainnet,
bsc,
base,
polygon,
arbitrum,
optimism,
avalanche,
} from 'viem/chains';
import type { Config } from 'wagmi';
import { WagmiProvider, createConfig as createWagmiConfig } from 'wagmi';

// Create Wagmi config with default chain and without connectors
export const wagmiConfig: Config = createWagmiConfig({
chains: [mainnet, bsc, base, polygon, arbitrum, optimism, avalanche],
multiInjectedProviderDiscovery: false,
client({ chain }) {
return createClient({ chain, transport: http() });
},
});

// Create SDK config using Wagmi actions and configuration
createConfig({
integrator: 'Fast Pay',
providers: [
EVM({
getWalletClient: () => getWalletClient(wagmiConfig),
switchChain: async chainId => {
const chain = await switchChain(wagmiConfig, { chainId });
return getWalletClient(wagmiConfig, { chainId: chain.id });
},
}),
],
// We disable chain preloading and will update chain configuration in runtime
preloadChains: true,
});

export const CustomWagmiProvider: FC = ({ children }) => {
return (

{children}

);
};
`

- dynamicWalletClient.tsx

`import "fast-text-encoding";
import { createClient } from "@dynamic-labs/client";
import { ReactNativeExtension } from "@dynamic-labs/react-native-extension";
import { ViemExtension } from "@dynamic-labs/viem-extension";

const environmentId = process.env.EXPO_PUBLIC_ENVIRONMENT_ID;

if (!environmentId) {
throw new Error("EXPO_PUBLIC_ENVIRONMENT_ID is required");
}

export const dynamicWalletClient = createClient({
environmentId,
appName: process.env.EXPO_PUBLIC_APP_NAME,
})
.extend(ReactNativeExtension())
.extend(ViemExtension());`

- App.tsx

`import { useEffect } from "react";
import { useFonts, RedHatDisplay_400Regular, RedHatDisplay_700Bold } from "@expo-google-fonts/red-hat-display";
import * as SplashScreen from "expo-splash-screen";
import { Stack } from 'expo-router';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Provider } from "react-redux";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { Buffer } from 'buffer';

import { dynamicWalletClient } from '../dynamicWalletClient'
import { SessionProvider } from "../providers/session/SessionProvider";
import store from "../redux/store";
import { CustomWagmiProvider } from "src/providers/CustomWagmiProvider";

const queryClient = new QueryClient();

// Polyfill for Crypto (required by some libraries like @lifi/sdk)

export default function RootLayout() {
return (
<>
<dynamicWalletClient.reactNative.WebView />



<GestureHandlerRootView style={{ flex: 1 }}>
<Stack screenOptions={(route) => ({
contentStyle: {
backgroundColor: '#010F1F'
},
headerBackgroundstyle: { backgroundColor: '#010F1F' }
})}>
<Stack.Screen name='index' options={{ headerShown: false }} />
<Stack.Screen name='(tabs)' />





</>
)
}`

[chybisov]

@phuongit0301, please don't respond to scammers and don't click any links. Team members always have a Member badge.

Regarding the question, it looks like you need to polyfill Buffer. What do you use @lifi/wallet-management for?

[phuongit0301]

Hello @chybisov
I don't use @lifi/wallet-management. How can I config polyfill Buffer?