Metro unstable_enablePackageExports cause app crash

[aliza-khu]

OS:

• MacOS

Platform:

• iOS
• Android

SDK:

• @sentry/react-native (>= 5.6.0)

react-native version: 0.72.0

Are you using Expo?

• No

Configuration:

(@sentry/react-native)

Sentry.init({
  dsn: 'https://[email protected]/...'
  tracesSampleRate: [value],
  environment: [value],
  debug: [value],
  initialScope: [value],
  enableNdkScopeSync: [value],
});

I have following issue:

• TypeError: TypeError: Cannot read property '__extends' of undefined, js engine: hermes
• TypeError: Cannot read property '__awaiter' of undefined

In One of the error files I found in the sentry's node module is ".../node_modules/@sentry/react-native/dist/js/client.js"

Steps to reproduce:

• Switch to react native 0.72.0
• Under metro.config.js file

const config = {
  resolver: {
    unstable_enableSymlinks: true,
    unstable_enablePackageExports: true,
  }
};

Actual result:

Facing above mentioned errors.

Expected result:

No Errors should be thrown.

[krystofwoldrich]

Hi, I've tried this in our sample app, but can't reproduce the errors. Would you be able to share a minimal reproducible example?

[krystofwoldrich]

Closing this due to inactivity. If this is still an issue feel free to comment here or open a new issue if the context changed.

[lluiscab]

Facing the same issue here.

• Dependencies:

@sentry/react-native	5.6.0
@react-native/metro-config	0.72.7
react-native	0.72.1

• Contents of metro.config.js:

const config = {
  resolver: {
    unstable_enablePackageExports: true,
  },
};

module.exports = mergeConfig(getDefaultConfig(appDir), config);

• Code:

import * as Sentry from '@sentry/react-native';

const routingInstrumentation = new Sentry.ReactNavigationInstrumentation();

Sentry.init({
  dsn: 'my self hosted dsn',
  autoInitializeNativeSdk: false,
  integrations: [
    new Sentry.ReactNativeTracing({
      routingInstrumentation,
    }),
  ]
});

export default Sentry.wrap(App)

Here's the error:

TypeError: Cannot read property '__extends' of undefined, js engine: hermes

and here's the stacktrace that I've been able to see:

<global>
	tslib/modules/index.js:26:10
ReactNativeClient#_initNativeSdk
	@sentry/react-native/dist/js/client.js:135:16
ReactNativeClient#constructor
	@sentry/react-native/dist/js/client.js:31:33
initAndBind
	@sentry/core/cjs/sdk.js:32:33
init
	@sentry/react-native/dist/js/sdk.js:93:16

At the end it seems like it's an error with tslib not being loaded correctly, which causes the following destruct in tslib/modules/index.js to fail

import tslib from '../tslib.js';
const {
    __extends,
    __assign,
    __rest,
    __decorate,
    __param,
    __metadata,
    __awaiter,
    __generator,
    __exportStar,
    __createBinding,
    __values,
    __read,
    __spread,
    __spreadArrays,
    __await,
    __asyncGenerator,
    __asyncDelegator,
    __asyncValues,
    __makeTemplateObject,
    __importStar,
    __importDefault,
    __classPrivateFieldGet,
    __classPrivateFieldSet,
} = tslib;

[aliza-khu]

@krystofwoldrich, Can you please share the solution?

[lluiscab]

I have managed to resolve the issue with the following patch:

diff --git a/node_modules/tslib/package.json b/node_modules/tslib/package.json
index f8c2a53..633c4d2 100644
--- a/node_modules/tslib/package.json
+++ b/node_modules/tslib/package.json
@@ -29,7 +29,7 @@
     "exports": {
         ".": {
             "module": "./tslib.es6.js",
-            "import": "./modules/index.js",
+            "_import": "./modules/index.js",
             "default": "./tslib.js"
         },
         "./": "./"

According to microsoft/tslib#143, microsoft/tslib#201 and microsoft/tslib#126, it does seem like the latest versions of tslib@2 fix this issue, but all sentry packages seem to depend on tslib@^1.9.3, which installs 1.14.1

I have verified that using tslib@2 fixes the issue by adding the following to my package.json file

"resolutions": {
  "tslib": "2.6.0"
}

[krystofwoldrich]

As @lluiscab adding the newer tslib to your project package.json will fix this issue until we update the library in our package.

"resolutions": {
  "tslib": "2.6.0"
}

@lluiscab Thank you for the research and finding out the culprit.

[krystofwoldrich]

We should add this to RN Troubleshooting docs.

[krystofwoldrich]

We have upgraded the tslib dependency in our JS SDK. This is available in https://github.com/getsentry/sentry-react-native/releases/tag/5.7.1