Unable to set location on globals file on expo 53

Help - Plug n Play
1

Screenshot_1751460888
Screenshot_17514608881080×2220 208 KB

2 
global.Buffer = require("buffer").Buffer;

// eslint-disable-next-line import/first
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");
}

process.browser = true;

import "./globals.js";
import "expo-router/entry";

// Learn more https://docs.expo.io/guides/customizing-metro
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("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"),
  buffer: require.resolve("buffer"),
};

config.transformer.getTransformOptions = () => ({
  transform: {
    experimentalImportSupport: false,
    inlineRequires: true,
  },
});

config.resolver.unstable_enablePackageExports = false;

module.exports = config;

  "dependencies": {
    "@expo/vector-icons": "^14.1.0",
    "@react-native-async-storage/async-storage": "2.1.2",
    "@react-navigation/native": "^7.1.6",
    "@web3auth/ethereum-provider": "^9.7.0",
    "@web3auth/react-native-sdk": "^8.1.0",
    "expo": "53.0.15",
    "expo-blur": "~14.1.5",
    "expo-dev-client": "~5.2.2",
    "expo-font": "~13.3.1",
    "expo-image": "~2.3.1",
    "expo-linear-gradient": "~14.1.5",
    "expo-linking": "~7.1.6",
    "expo-router": "~5.1.2",
    "expo-splash-screen": "~0.30.9",
    "expo-status-bar": "~2.2.3",
    "expo-system-ui": "~5.0.9",
    "expo-web-browser": "~14.2.0",
    "jotai": "^2.12.5",
    "moti": "^0.30.0",
    "react": "19.0.0",
    "react-dom": "19.0.0",
    "react-native": "0.79.4",
    "react-native-gesture-handler": "~2.24.0",
    "react-native-keyboard-controller": "^1.17.5",
    "react-native-quick-crypto": "^0.7.15",
    "react-native-reanimated": "~3.17.4",
    "react-native-safe-area-context": "5.4.0",
    "react-native-screens": "~4.11.1",
    "react-native-web": "~0.20.0",
    "expo-secure-store": "~14.2.3"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@types/react": "~19.0.10",
    "buffer": "^6.0.3",
    "crypto-browserify": "^3.12.1",
    "empty-module": "^0.0.2",
    "eslint": "^9.0.0",
    "eslint-config-expo": "~9.2.0",
    "eslint-config-prettier": "^10.1.5",
    "eslint-plugin-prettier": "^5.5.1",
    "jest": "^29.2.1",
    "jest-expo": "~53.0.8",
    "prettier": "^3.6.2",
    "process": "^0.11.10",
    "react-native-get-random-values": "^1.11.0",
    "react-test-renderer": "19.0.0",
    "readable-stream": "^4.7.0",
    "typescript": "~5.8.3"
  },
3

Thanks for sharing the details and screenshot, Tiago! Here’s a summary of your issue and the context for the support team:

Issue Summary

  • SDK: Web3Auth Plug n Play (PnP) React Native SDK
  • Platform: Expo Managed Workflow (Expo SDK 53)
  • Problem: Unable to set the global.location property in the globals.js file as part of the polyfill setup for Expo 53. The screenshot shows an error related to this assignment.

What You’ve Tried

  • Following the official Web3Auth React Native Metro Polyfill Troubleshooting Guide.
  • Adding a globals.js file and importing it in your entry point as recommended.
  • The relevant code snippet in your globals.js:
    global.Buffer = require("buffer").Buffer;
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;

Expo SDK Version: 53
Screenshot Provided: Yes (shows error when setting global.location)

Next Steps & Suggestions

  1. Expo SDK 53 Compatibility:
    Expo SDK 53 is quite new, and there may be changes in how globals are handled. It’s possible that Expo has made global objects like location read-only or restricted their modification for security reasons.

  2. Check for Existing Issues:

  3. Potential Workarounds:

    • Try wrapping the assignment in a try-catch to see if you get a more descriptive error:
      try {
  global.location = { protocol: "file:" };
} catch (e) {
  console.log("Error setting global.location:", e);
}
    • If Expo 53 restricts this, you might need to patch the dependencies that expect global.location, or check if they offer a way to inject a custom location object.

  4. Alternative Polyfill Approach:

    • Some users have reported success by polyfilling only the required modules and omitting global.location when using newer Expo SDKs.
    • Double-check if your dependencies actually require global.location, or if this line can be skipped in your context.

  5. Expo Custom Dev Client:

    • Ensure you are using a Custom Dev Client or EAS build, as polyfills are not supported in Expo Go.

Questions for You (if needed):

  • Are you using a Custom Dev Client or EAS build (not Expo Go)?
  • Does the error persist if you comment out the global.location assignment?
  • Are there any other errors in the console related to polyfills or missing modules?

References:

Let us know if commenting out the global.location assignment works, or if you have more details from the error logs. This will help us provide a more targeted solution!

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

4

You’re trying to override global.location which isn’t supported with Hermes it seems.
Can you try another workaround to avoid it entirely and use a proper shim or alternative polyfill that doesn’t rely on it?