React Native SDK error when upgrade react native version

Help - Plug n Play PnP React Native SDK
1

I try to upgrade my react native version from 0.74.5 to 0.80.2 and it returned error when logining
Note that it still worked in v0.74.5

TypeError: global.base64FromArrayBuffer is not a function (it is undefined)

package.json

"react": "19.1.0",
"react-native": "0.80.2",
"@web3auth/base": "^9.7.0",
"@web3auth/ethereum-provider": "^9.7.0",
"@web3auth/react-native-sdk": "^8.1.0",
"react-native-quick-crypto": "^0.7.12",

globals.js

global.Buffer = require('buffer').Buffer;
import { install } from 'react-native-quick-crypto'
install()
// Needed so that 'stream-http' chooses the right default protocol.
global.location = {
	protocol: 'file:',
};
global.process.version = 'v16.0.0';
if (!global.process.version) {
	global.process = require('process');
	console.log({ process: global.process });
}
process.browser = true;

metro.config.js

const config = {
  resolver: {
    extraNodeModules: {
      assert: require.resolve("empty-module"), // assert can be polyfilled here if needed
      http: require.resolve("empty-module"), // stream-http can be polyfilled here if needed
      https: require.resolve("empty-module"), // https-browserify can be polyfilled here if needed
      os: require.resolve("empty-module"), // os-browserify can be polyfilled here if needed
      url: require.resolve("empty-module"), // url can be polyfilled here if needed
      zlib: require.resolve("empty-module"), // browserify-zlib can be polyfilled here if needed
      path: require.resolve("empty-module"),
      crypto: require.resolve("crypto-browserify"),
      stream: require.resolve("readable-stream"),
    },
    sourceExts: [...defaultConfig.resolver.sourceExts, "svg"],
  },
};
2

Thank you for providing detailed information about your issue. Here’s a summary for the support team:

Issue Summary

  • SDK Details: PnP React Native SDK
  • SDK Versions:
  • React Native Version: 0.80.2 (upgraded from 0.74.5, where it was working)
  • React Version: 19.1.0
  • Platform: React Native (Bare Workflow)

Error Encountered

TypeError: global.base64FromArrayBuffer is not a function (it is undefined)

This error occurs during login after upgrading React Native.

Provided Configuration

  • globals.js: Polyfills for Buffer, crypto, process, etc. (using react-native-quick-crypto)
  • metro.config.js: Custom extraNodeModules for polyfills.

Next Steps & Suggestions

This error suggests that the global function base64FromArrayBuffer is missing after your upgrade. This function is typically polyfilled or provided by certain dependencies, but may be missing or removed in newer React Native versions.

1. Polyfill base64FromArrayBuffer

You may need to manually polyfill this function in your globals.js. Add the following at the top of your globals.js:

global.base64FromArrayBuffer = function (arrayBuffer) {
  const base64 = Buffer.from(arrayBuffer).toString('base64');
  return base64;
};

2. Order of Imports

Ensure that your entry point (e.g., index.js or App.js) imports globals.js before any other modules that might require these polyfills.

3. Reference Migration Guide

You appear to have followed the migration guide, but double-check the PnP React Native v7 to v8 Migration Guide for any missed steps, especially around globals and polyfills.

4. Check for Additional Polyfills

Some dependencies might require additional polyfills. Review the official Web3Auth React Native polyfill guide for any updates relevant to React Native 0.80+.

Additional Information Needed (if issue persists)

If the above does not resolve your issue, please provide:

  • The Web3Auth initialization and login code snippets.
  • A screenshot of the browser/dev console or React Native error log.
  • Any additional custom authentication setup details, if applicable.

Let us know if adding the polyfill resolves the error, or if you need further assistance!

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

After add:

global.base64FromArrayBuffer = function (arrayBuffer) {
  const base64 = Buffer.from(arrayBuffer).toString('base64');
  return base64;
};

it returns:

RangeError: Maximum call stack size exceeded (native stack depth)