Issue with URL POLYFILL resolution in react-native EXPO set up. TypeError: Cannot read properties of undefined (reading 'decode')

[acadeum7]

Hello Web3Auth team,

I’m running into a consistent crash in my React Native + Expo project when using the @web3auth/react-native-sdk. It’s possible that I set up my expo environment incorrectly, but I’m pretty sure I set it up correctly. The new URL(…) call within the web3auth util.js is failing. Specifically, the app explodes with:

web3auth util.js
const url = new URL(${signerHost(web3AuthNetwork)}/api/configuration);

TypeError: Cannot read properties of undefined (reading 'decode')

After some debugging, it looks like there is a collision between two different “URL” implementations. I am attempting to use react-native-url-polyfill for the URL polyfill:

1. import react-native-url-polyfill/auto – This sets global.URL to a JSI-based or native-backed URL (which works fine in Expo).
2. import Named imports in the SDK – The Web3Auth SDK does:

js

import { URL, URLSearchParams } from "react-native-url-polyfill";

which appears to pull in the JavaScript fallback from whatwg-url-without-unicode. This fallback requires some Node-like APIs (e.g., a working TextDecoder path), and it doesn’t seem to play nicely in the React Native environment.

My investigation showed that if I remove or comment out the named imports in the SDK code and rely solely on the global URL (which react-native-url-polyfill/auto provides), everything starts working again. But, of course, editing node_modules/@web3auth/react-native-sdk/ directly isn’t a great long-term approach.

Here’s a rough outline of my setup and findings:

• Environment:
  • Expo SDK 52
  • React Native 0.72
  • node version v22.12.0
  • @web3auth/react-native-sdk 8.1.0
  • Using react-native-url-polyfill@2.0.0 with auto at my application entry point
• Symptoms:
  • Cannot read properties of undefined (reading 'decode')
  • Stack trace points to whatwg-url-without-unicode code used by Web3Auth
• Workarounds tried:
  1. Monkey-patching with global.URL/global.URLSearchParams in my own globals.js before loading the rest of the app.
  2. Metro config aliasing to force whatwg-url-without-unicode to map to react-native-url-polyfill.
  3. Removing named imports in the SDK and relying on the global URL polyfill. (Works, but is a direct node_modules edit.)

The last option fully resolves the crash, which implies that the fallback polyfill from whatwg-url-without-unicode is conflicting with the JSI-based URL in React Native.

Is this behavior by design, or is it a bug on your end?
Would it be possible for the SDK to rely on the globally patched URL (from react-native-url-polyfill/auto) or at least provide an option to do so? That would ensure everything uses a single consistent URL implementation in the React Native environment.

I’d love to hear if there’s an official or recommended fix, so we don’t have to patch the SDK manually in our project.

Thanks so much!

globals.js
import “react-native-url-polyfill/auto”;

global.URL = global.URL || require(“react-native-url-polyfill”).URL;
global.URLSearchParams = global.URLSearchParams || require(“react-native-url-polyfill”).URLSearchParams;

import { Buffer } from “buffer”;
global.Buffer = Buffer;

metro.config.js
// Learn more Metro bundler - Expo Documentation
const { getDefaultConfig } = require(“expo/metro-config”);

/** @type {import(‘expo/metro-config’).MetroConfig} */
const config = getDefaultConfig(__dirname);

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(‘react-native-url-polyfill’), // url can be polyfilled here if needed REPLACED EMPTY-module here/
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”),
buffer: require.resolve(“buffer”),
};

By the way, I am almost certain this is related to

Decode undefined: setup using expo workflow

web3auth/react-native-sdk: ^7.0.0, Hello guys, I face some issue when setup the web3auth plug n play using react native expo workflow. I refer to these: The issue I face is when I call web3auth.init(), I got this error: [error] I already follow exactly for globals.js, metro.config.js and index.js

[w3abot]

Hi acadeum7!

Thank you for providing such a detailed explanation of the issue you’re facing. It truly helps in understanding the scope of the problem. Let’s summarize the details you’ve shared for clarity:

Environment Details:

• Platform: React Native (Expo)
• Expo SDK: 52
• React Native Version: 0.72
• Node Version: v22.12.0
• Web3Auth Package: @web3auth/react-native-sdk 8.1.0
• URL Polyfill: react-native-url-polyfill@2.0.0

Issue Description:

You’re encountering a TypeError: Cannot read properties of undefined (reading 'decode') error due to a collision between two “URL” implementations. The problem seems to stem from the Web3Auth SDK using named imports which conflict with the globally patched URL provided by react-native-url-polyfill/auto.

Workarounds Attempted:

1. Monkey-patching with global URL.
2. Metro config aliasing to force whatwg-url-without-unicode to map to react-native-url-polyfill.
3. Modifying SDK’s node_modules directly, removing named imports.

Proposed Course of Action:

Given the comprehensive steps you’ve already taken, it seems there might be an opportunity for improvement on the SDK side to streamline URL handling in React Native environments. The suggestions you provided are insightful and could potentially lead to a permanent fix:

• It might help if the SDK could better align with the global URL polyfill you are using.

Have you tried raising this issue in the SDK’s GitHub Issues page? That could ensure the maintainers have visibility and it could be addressed in future updates. Meanwhile, keeping the Metro config workaround in place might be the best interim solution to maintain stability in your project.

I’ll make sure this feedback reaches the Web3Auth team. Hopefully, a built-in solution will be on the horizon! Feel free to update us with any further developments or insights.

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.

[guru]

web3auth-pnp-examples/react-native/rn-expo-example at main ·...

can you check the example and compare

if error still persists
give us metro.config.js, global.js which is included in index.js also
index.jsx file

some tips
make sure to import
import "react-native-get-random-values";
also include global.js file in index.js or equivalent index file
and compare metro.config.js file https://github.com/Web3Auth/web3auth-pnp-examples/blob/main/react-native/rn-expo-example/metro.config.js for expo setup

[chai]

If you’re adding URL in globals, don’t polyfill it again in metro.