Include a `react-native` field to the package.json of various Sentry dependencies that points to ESM

[abejfehr]

Problem Statement

Right now Sentry's modules are loaded at app start if you use sentry-react-native, which contains a main field (here) that points to an ESM file ✅

sentry-react-native depends on many other Sentry packages, like the ones in this repo, and those packages do not contain a main field or react-native field that points to an ESM file, their main field points to a CJS file instead (like this). ❌

The reason this is problematic is because virtually every RN project ever is based on Expo, and Expo's default Metro config does not prefer module over main for resolverMainFields here.

This leads to a situation where a bunch of CJS files are loaded at every app start of every Expo app, here's just an exerpt of all my loaded modules shortly after app start (obtained using this trick):

  ../../../node_modules/@sentry-internal/browser-utils/build/cjs/getNativeImplementation.js
  ../../../node_modules/@sentry-internal/browser-utils/build/cjs/index.js
  ../../../node_modules/@sentry-internal/browser-utils/build/cjs/instrument/dom.js
  ../../../node_modules/@sentry-internal/browser-utils/build/cjs/instrument/history.js
  ../../../node_modules/@sentry-internal/browser-utils/build/cjs/instrument/xhr.js
  ../../../node_modules/@sentry-internal/browser-utils/build/cjs/metrics/browserMetrics.js
  ../../../node_modules/@sentry-internal/browser-utils/build/cjs/metrics/inp.js
  ../../../node_modules/@sentry-internal/browser-utils/build/cjs/metrics/instrument.js
  ../../../node_modules/@sentry-internal/browser-utils/build/cjs/metrics/utils.js
  ../../../node_modules/@sentry-internal/browser-utils/build/cjs/types.js
  ../../../node_modules/@sentry-internal/feedback/build/npm/cjs/index.js
  ../../../node_modules/@sentry-internal/replay-canvas/build/npm/cjs/index.js
  ../../../node_modules/@sentry-internal/replay/build/npm/cjs/index.js
  ../../../node_modules/@sentry/browser/build/npm/cjs/client.js
  ../../../node_modules/@sentry/browser/build/npm/cjs/eventbuilder.js
  ../../../node_modules/@sentry/browser/build/npm/cjs/feedbackAsync.js

^ the number of files from node_modules/@sentry that are loaded on app start is 400, which is simply too many.

If I manually update every @sentry/* package's package.json to have a react-native field that points to an ESM file, Metro transforms the ESM to CJS and inilnes the requires, which drastically reduces the number of files loaded on app start.

Solution Brainstorm

Sentry packages should either inline requires when producing CJS files, or have a react-native field that points to ESM (even for the non-react-native packages, because those are also dependencies)

[Lms24]

Hey @abejfehr thanks for writing in! I think we can add such a fied but I'd like to let @krystofwoldrich chime in here.

As a RN-noob, this makes me suspicious:

The reason this is problematic is because virtually every RN project ever is based on Expo, and Expo's default Metro config does not prefer module over main for resolverMainFields

I'm wondering if there's something else involved because this is the first time that I'm, aware this issue is reported. Though again, Krystof probably has more insight.

[krystofwoldrich]

Hi @abejfehr,
thank you for the message and bringing it to our attention.

It makes sense to minimize the number of modules loaded at app start.

---

I haven't tested this yet, but using the `exports' field might resolve the issue of not importing ESM.

https://metrobundler.dev/docs/configuration#unstable_enablepackageexports-experimental

Although marked as experimental in docs, this flag is now the default in RN 0.79 (released yesterday)