React Native: Property 'structuredClone' doesn't exist when running the app in Expo Go

Issue

I'm developing an application with React Native and I'm using the structuredClone function in my code for deep-cloning objects.

My project was scaffolded with Expo's CLI. React Native version is 0.72.6, Expo version is ~49.0.15, I'm also using Typescript (^5.1.3).

• I start up the application with the npm run android command
• In the terminal I press s to switch to Expo Go
• I scan the QR code and open the app on my Android phone
• I start testing the app and as a I reach the screen where structuredClone is used it crashes with the error message Property 'structuredClone' doesn't exist

The same thing happens in my emulator (running Pixel 6, Android API 34 as a virtual device).

Now the strange thing is that if I run the app using development build (which is the default at startup), then everything works perfectly and I don't see this error.

I'm very new to RN development and I'm a bit confused about this as I know that structuredClone is a fairly new feature in JS, so it's not available in all the engines. But what I don't understand is, how can I choose the exact JS engine version to use? How is development mode and the "Running in Expo Go" different from each other, why is the error only present when using Expo Go? Does this influence the runtime?

Googling the issue only led me to answers relating to certain Node.js versions not supporting structuredClode or problems with Typescript, but nothing in the context of RN.

I'm also using Hermes as a JS engine, I set it up following the instructions in Expo's docs.

Is it possible that Hermes itself doesn't support structuredClone? I would like to keep using Hermes as I understand it produces smaller and more optimized build output. Is there a way to add a polyfill for structuredClone or should I just use some other method to copy my objects, like doing JSON.parse(JSON.stringify(myObject))?

My app.json file looks like this:

{
  "expo": {
    "name": "my-app",
    "slug": "my-app",
    "jsEngine": "hermes",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "com.myname.myapp"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

Solution

This issue for Hermes pretty much gives an answer. Since structuredClone is only a web API and not part of the ECMAScript specification, they choose not to implement it in the engine so, have to use other methods for deep cloning.

Answered By - Cooty