Refferece error buffer don`t exist

Help - Plug n Play PnP React Native SDK
1

i got this when i implement the web3auth i did the same thing what they said in docs .

i also have the same global and imported in index chage the metrocongif i have buffer install but still show the buffer doest exist in mimsponge.js i dont know the where the file belongs to .
these are versions i use
“react-native”: “0.75.3”,
“@web3auth/base”: “^9.7.0”,
“@web3auth/ethereum-provider”: “^9.3.0”,
“@web3auth/react-native-sdk”: “^8.0.0”,
“buffer”: “^6.0.3”,
“pusher-js”: “^7.4.0”,
“process”: “^0.11.10”,

2

Thanks for sharing the details, Kamesh! Here’s a summary of your issue for the support team:

Issue Summary:
You’re seeing a ReferenceError: buffer doesn’t exist (in mimsponge.js) when integrating Web3Auth with the PnP React Native SDK, despite following the documentation. You’ve already:

  • Installed buffer and imported it globally in your index file.
  • Updated your metro.config.js as recommended.
  • Still facing the error.

Environment Details:

  • Platform: React Native (v0.75.3)
  • Web3Auth SDKs:
  • buffer: ^6.0.3
  • pusher-js: ^7.4.0
  • process: ^0.11.10

Next Steps & Suggestions:

  1. Double-check Buffer Polyfill:
    Ensure you have the following at the very top of your index.js (before any other imports):

    import { Buffer } from 'buffer';
global.Buffer = Buffer;

  2. Metro Config:
    Make sure your metro.config.js includes:

    const { getDefaultConfig } = require('expo/metro-config');
module.exports = (async () => {
  const config = await getDefaultConfig(__dirname);
  config.resolver.extraNodeModules = {
    ...config.resolver.extraNodeModules,
    buffer: require.resolve('buffer/'),
  };
  return config;
})();

    (Adjust if you’re not using Expo, refer to Web3Auth React Native Setup for your setup.)

  3. Clear Metro Cache:
    Sometimes changes don’t take effect until you reset Metro’s cache:

    npx react-native start --reset-cache

  4. Check for Duplicate Buffer Installs:
    Run npm ls buffer or yarn why buffer to ensure there’s only one version installed.

Request for Additional Info:
To help further, could you please provide:

  • The relevant part of your index.js where you import and set Buffer.
  • A screenshot or the full error stack trace (especially the part mentioning mimsponge.js).
  • If you’re using Expo or plain React Native CLI.

Let us know if these steps help or if you can share the additional info above!

Note: This response was generated by an AI bot and may require further verification. The Web3Auth support team has tracked this issue and will be responding as soon as possible.

Additionally, we would recommend you to join our biweekly Office Hours to get this resolved even faster. Web3Auth Developer Office Hours

3 
// Inject node globals into React Native global scope.

// Required for crypto functionality for bitcoinjs-lib, web3, etc.

global.Buffer = require('buffer').Buffer;

//global.Buffer.TYPED_ARRAY_SUPPORT = false;

global.process = require('process');

global.process.env.NODE_ENV = __DEV__ ? 'development' : 'production';

var getRandomValues = function(byteArray) {

var bytes = crypto.rng.randomBytes(byteArray.length);

for (let i = 0; i < byteArray.length; i++) {

byteArray[i] = bytes[i];

}

};

// "But Zach, aren't you just doing the same thing twice?"

// Yes. Initializing the crypto-browserify module eventually requires

// crypto.getRandomValues to exist, so we must add it here once.

// However, crypto-browserify does not support getRandomValues, so we

// must re-add it after loading the module.

global.crypto = { getRandomValues };

global.crypto.rng = require('react-native-randombytes');

global.crypto = require('crypto');

global.crypto.getRandomValues = getRandomValues;

global.crypto.rng = require('react-native-randombytes');

crypto.rng.seedSJCL();

// Needed so that 'stream-http' chooses the right default protocol.

global.location = {

protocol: 'file:'

};

this is my global.js

/**
 * @format
 */

import "react-native-gesture-handler";
import { AppRegistry } from "react-native";
import App from "./App";
import { name as appName } from "./app.json";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { Provider } from "react-redux";
import configureStore from './App/Redux/store'
import 'react-native-get-random-values'
import '@walletconnect/react-native-compat'
import 'react-native-polyfill-globals/auto';
import 'node-libs-react-native/globals';
import '@ethersproject/shims';
import 'fast-text-encoding';  // or perhaps this
import './globals'
import "./shim";

global.crypto.getRandomValues; // Required

const MainView = () => {
 

const store = configureStore();
  

  return (
    <Provider store={store}>
      <GestureHandlerRootView style={{ flex: 1 }}>
        <App />
      </GestureHandlerRootView>
    </Provider>
  );
};

AppRegistry.registerComponent(appName, () => MainView);

this is my index

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const path = require('path');

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

const config = {
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer/react-native'),
  },
  resolver: {
    extraNodeModules: {
      ...defaultConfig.resolver.extraNodeModules,
      stream: require.resolve('stream-browserify'),
      buffer: require.resolve('buffer/'),
      process: require.resolve('process/browser'),
      crypto: require.resolve('crypto-browserify'),
      assert: require.resolve('assert'),
      os: require.resolve('os-browserify/browser'),
      http: require.resolve('stream-http'),
      https: require.resolve('https-browserify'),
      url: require.resolve('url/'),
      vm: require.resolve('vm-browserify'),
      zlib: require.resolve('browserify-zlib'),
    },
    assetExts: assetExts.filter((ext) => ext !== 'svg'),
    sourceExts: [...sourceExts, 'svg'],
  },
};

module.exports = mergeConfig(defaultConfig, config);

this is my metroconfig

4

Hey @palanikameshwaranmat

Please have a look at this troubleshooting doc which outlines all the details of solving this issue: Bundler Polyfill Issues - React Native Metro | Documentation | Web3Auth

Let me know if the fixes over there still don’t work for you.

1 Like
5

i solved
// import ‘react-native-polyfill-globals/auto’; culprit lib for web3auth sdk

this lib is overide the package

6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.