[worklets][bundle mode] Error: getPropertyAsObject: property '__reportFatalRemoteError' is undefined

[hannojg]

Description

When using the new bundle mode in a fresh expo project you get the following error on app start:

Caused by: com.facebook.react.common.JavascriptException: [runtime not ready]: Error: Exception in HostFunction: getPropertyAsObject: property '__reportFatalRemoteError' is undefined, expected an Object

Error: getPropertyAsObject: property '__reportFatalRemoteError' is undefined, expected an Object
    at installTurboModule (native)
    at NativeWorklets (http://127.0.0.1:8081/index.ts.b...

I debugged this, and the reason seems to be that expo ships its metro config with inline requires disabled.
Due to that, when trying to load the bundle into the ui runtime here:

react-native-reanimated/packages/react-native-worklets/Common/cpp/worklets/WorkletRuntime/WorkletRuntime.cpp

Line 120 in 5cd6eb5

rt.evaluateJavaScript(script, sourceUrl);

i assume that we try to import too much stuff in the wrong order, breaking expectations of worklets bundle mode (or something like that).

The workaround is to enable inline requires, however, this got me thinking if in the bundleModeMetroConfig we should enable that option, or somehow add a check if this option is disabled and throw an explicit error?

Steps to reproduce

1. Setup a blank expo app
2. Enable bundle mode
3. try to call a worklet function in App.tsx

Alternatively, I assume in the showcase app, you can try setting inlineRequires to false and i assume it would crash as well

Snack or a link to a repository

I am so sorry, i didn't have time yet to create one.

Reanimated version

4.2.1

Worklets version

0.8.0-bundle-mode-preview-1

React Native version

0.83.1

Platforms

Android

JavaScript runtime

Hermes

Workflow

Expo Dev Client

Architecture

New Architecture (Fabric renderer)

Reanimated feature flags

No

React Native release level

Stable

Build type

Debug app & dev bundle

Device

Real device

Host machine

macOS

Device model

No response

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[tjzel]

Thanks for the issue, I was able to reproduce it. You are right, disabled inline requires are indeed the cause for this error.

When inline requires are enabled the index.ts of Worklets looks like this, the key bit is that the init function from initializers.ts is evaluated first as expected:

However, with inline requires disabled it's actually evaluated after all the exports which breaks the assumptions.

Perhaps enabling inlineRequires globally is not necessary but I'm not sure how to enforce non-inlined requires to trigger the init() side-effect while also keeping it neatly inside initializers.ts.