Expo 53 - ERROR Warning: TypeError: Cannot read property 'length' of undefined, js engine: hermes

[meabed]

when running expo 53 - just on fresh project - I get the error

 ERROR  Warning: TypeError: Cannot read property 'length' of undefined, js engine: hermes

removing bugsnag import and the error goes away.

packages from npx create-expo-app@latest --template bare-minimum :

    "expo": "53.0.7",
    "react-native": "0.79.2",

[agrzegorzewski]

Hi @meabed,

Thanks for reaching out.

Please note that we don’t officially support Expo@53 yet, but this doesn’t mean it won’t work. We’ve tried reproducing the issue you’ve described, but were unable to.

Could you please share some extra details on the issue? For example, we’d appreciate exact reproduction steps or even a minimal reproduction app, more information on the error, i.e., its stacktrace or surrounding console output and a code snippet of your BugSnag Notifier configuration.

[meabed]

Sure here is the steps to re-produce:

# create expo app 
npx create-expo-app@latest --template bare-minimum


# add these packages to package.json dependency:

  "dependencies": {
    "@bugsnag/expo": "52.0.0",
    "@bugsnag/plugin-expo-eas-sourcemaps": "52.0.1",
    "@bugsnag/source-maps": "2.3.3",
    "@react-native-community/netinfo": "^11.4.1",
    "expo": "~53.0.7",
    "expo-application": "^6.1.4",
    "expo-crypto": "^14.1.4",
    "expo-device": "^7.1.4",
    "expo-secure-store": "^14.2.3",
    "expo-status-bar": "~2.2.3",
    "react": "19.0.0",
    "react-native": "0.79.2"
  },





# create logger.ts file: 
import Bugsnag from '@bugsnag/expo';

Bugsnag.start({});

export function buggyLogger(message) {
    Bugsnag.notify(message);
}


# use the logger in app.js 
import {buggyLogger} from "./bugsnag";

buggyLogger('Hello from App.js');


# Run the app - you will get the error 
ERROR  [runtime not ready]: Error: No Bugsnag API Key set, js engine: hermes

[agrzegorzewski]

Hi @meabed,

Thanks for the reproduction steps.

From what you’ve described, it looks like you’re installing @bugsnag/expo manually, just by adding the package to your package.json.

The Expo notifier takes a fair bit of work to set up, so that’s why we provide a CLI for adding BugSnag to your Expo project. https://docs.bugsnag.com/platforms/react-native/expo/#installation-and-configuration

You can add BugSnag to your project by running npx bugsnag-expo-cli init inside your project's root folder. This should work in projects where @bugsnag/expo is already installed, but if possible, it’s better to remove any BugSnag packages from your project first and then use the CLI.

In case you’re unable to use the CLI, you can find the manual integration guide here: https://docs.bugsnag.com/platforms/react-native/expo/manual-setup/

Additionally, please note, that Bugsnag.start() should be called in the earliest place in your program. We usually recommend adding it to App.js.

[meabed]

Thanks @agrzegorzewski

Do you mean there is no bug need to be addressed?

I have all steps setup and bugsnag working correctly on expo52,
Apikey, source map plugin, etc...

I don't include everything here as to keep it short.

The same setup working with earlier expo 52 just fine, the only change is the upgrade which also updates react native version and herms and use new architecture.

I think there is bug in the expo plugin and worth looking into fixing.

[agrzegorzewski]

Hi @meabed ,

From our testing, the BugSnag notifier appears to be working in Expo 53. Could you please share with us how you’ve installed the BugSnag notifier into your Expo project? Please keep in mind that just npm i @bugnsag/expo is not enough, and you either need to use our CLI or follow the manual installation guide: BugSnag docs › Platforms › React Native › Expo › Manual integration

[meabed]

Hi @agrzegorzewski thank you I will re-test and let you know.

[jonluca]

We're seeing this too - it's in @bugsnag/cuid, on navigator to userAgent

  var clientId = pad((mimeTypesLength + navigator.userAgent.length).toString(36) + globalCount.toString(36), 4);

We're able to bypass this in metro.config.js by setting inlineRequires to true, but it still seems like an error on bugsnag's end.

// @ts-check
/* eslint-disable @typescript-eslint/no-require-imports */
const { withNativeWind } = require("nativewind/metro");
const { getSentryExpoConfig } = require("@sentry/react-native/metro");

const metroConfig = getSentryExpoConfig(__dirname, {
  isCSSEnabled: true,
});
if (metroConfig && metroConfig.resolver && metroConfig.resolver.sourceExts) {
  metroConfig.resolver.sourceExts = [...metroConfig.resolver.sourceExts, "cjs", "svg"];
}

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

// @ts-ignore
const finalConfig = withNativeWind(metroConfig, {
  input: "./expo/src/styles.css",
  configPath: "./tailwind.config.ts",
});
// finalConfig.resolver.unstable_enablePackageExports = true;
module.exports = finalConfig;

[jonluca]

Looking into this more it's a bit odd. The bugsnag cuid package does correctly have the platform specific extension of .browser.js - this should theoretically be respected by metro/babel.

We're using Expo 53 with bugsnag-expo ^52.

It's easier to read the stack trace when using an async import

  useEffect(() => {
    import("@bugsnag/expo").then(({ default: Bugsnag }) => {
      Bugsnag.start();
      Bugsnag.setUser(userID, email || undefined, name || undefined);
    });
  }, [email, name, userID]);

I think it has to do with something around how the exports are handled for the cuid package. Maybe it's worth using platform specific extensions of .native.js and .web.js instead of the current ones? https://reactnative.dev/docs/platform-specific-code#platform-specific-extensions

  "exports": {
    ".": {
      "import": "./index.esm.mjs",
      "require": "./dist/index.js"
    },
    "./lib/fingerprint": {
      "browser": "./lib/fingerprint.browser.mjs",
      "node": "./lib/fingerprint.mjs",
      "default": "./lib/fingerprint.react-native.mjs"
    }
  },
  "imports": {
    "#fingerprint": {
      "browser": "./lib/fingerprint.browser.mjs",
      "node": "./lib/fingerprint.mjs",
      "default": "./lib/fingerprint.react-native.mjs"
    }
  },
  "browser": {
    "./dist/lib/fingerprint.js": "./dist/lib/fingerprint.browser.js"
  },
  "react-native": {
    "./dist/lib/fingerprint.js": "./dist/lib/fingerprint.react-native.js"
  },

[jonluca]

Managed to work around it with a custom metro resolver

// @ts-ignore
metroConfig.resolver = {
  ...metroConfig.resolver,
  // @ts-ignore
  resolveRequest: (context, moduleName, platform) => {
    // Check if this is the problematic import

    if (moduleName === "./lib/fingerprint.js") {
      return context.resolveRequest(context, "./lib/fingerprint.react-native.js", platform);
    }
    // For all other modules, use the default resolution
    return context.resolveRequest(context, moduleName, platform);
  },
};

This now loads and works as expected

[meabed]

Thank you @jonluca - i will test the fix in my setup as well and report back.

[meabed]

Thank you @jonluca I have validated the fix and its fixing the issue! 👍

The error again is:

[runtime not ready]: TypeError: Cannot read property 'length' of undefined, js engine: hermes

my metro.config.js file is:

// 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);

const getConfig = async () => {
  const {
    resolver: {  resolveRequest },
  } = config;

  config.resolver = {
    ...config.resolver,
    resolveRequest: (context, moduleName, platform) => {
      // Check if this is the problematic import

      if (moduleName === './lib/fingerprint.js') {
        return context.resolveRequest(context, './lib/fingerprint.react-native.js', platform);
      }
      // For all other modules, use the default resolution
      return context.resolveRequest(context, moduleName, platform);
    },
  };

  return config;
};

module.exports = getConfig();

@agrzegorzewski hope this help to fix the issue.

[yousif-bugsnag]

Hi @meabed and @jonluca ,

Thanks for reporting this and for sharing your workaround.

As you've mentioned, @bugsnag/cuid does already have conditional exports defined - it could be that these need some tweaking, but it would be good to try and understand why it appears to be resolving to the browser implementation here.

I've tried to reproduce the issue on a fresh Expo 53 project but haven't been able to - it seems to resolve the react native implementation as expected using the default metro config.

Can you confirm which platform you're seeing this on? Do you see the error when running on Android/iOS or is this a web build?