React-native-web build fails on sentry-react-native import

[krystofwoldrich]

Description

import * as Sentry from @sentry/react-native results in build error when using react-native-web.

ERROR in ../rn/dist/js/sdk.js 111:16
Module parse failed: Unexpected token (111:16)
File was processed with these loaders:
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
|     const RootApp = (appProps) => {
|         var _a;
>         return (<TouchEventBoundary {...((_a = options === null || options === void 0 ? void 0 : options.touchEventBoundaryProps) !== null && _a !== void 0 ? _a : {})}>
|         <ReactNativeProfiler {...profilerProps}>
|           <RootComponent {...appProps}/>

ERROR in ../rn/dist/js/touchevents.js 41:16
Module parse failed: Unexpected token (41:16)
File was processed with these loaders:
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
|      */
|     render() {
>         return (<View style={touchEventStyles.wrapperView} 
|         // eslint-disable-next-line @typescript-eslint/no-explicit-any
|         onTouchStart={this._onTouchStart.bind(this)}>

[jer-sen]

Same issue for my project with last version of expo-sentry@6.2.1 and its strict dependency @sentry/react-native@4.15.2

[jer-sen]

Fixed by adding '@sentry/react-native' to array web.build.babel.include in Expo app.config

[krystofwoldrich]

@jer-sen expo-sentry@6.2.0 or expo-sentry@6.2.1? This was an issue in 6.2.0 but should be fixed in 6.2.1.

[jer-sen]

I confirm that sentry-expo@6.2.1 depends on "@sentry/react-native": "4.15.2" which have jsx in @sentry/react-native/dist/js/sdk.js

[krystofwoldrich]

@jer-sen Yes, there is JSX in sdk.js but for react-native-web nothing from sentry-react-native should be imported by default, therefore the build should not fail.

• Fix react native web builds expo/sentry-expo#341

The JSX code was in the SDK already before the update.

[github-actions]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you label it Status: Backlog or Status: In Progress, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀

[elenitaex5]

I've been trying with many different versions and fixes for this error... and nothing work for me... I've tried @jer-sen solutions... 'sentry-expo' with versions 6.2.0, 6.2.2, 7.0.X and also sentry-react-native with their install guide. This error seems to be everywhere.

[krystofwoldrich]

@elenitaex5 Thank you for the message. We will check it, the sentry-expo should work for react-native-web it switches to our sentry-javascript browser SDK.

[elenitaex5]

Hey @krystofwoldrich ! thanks to your help I get @sentry/react-native working in my Expo project (sentry-expo is not working) through many many attempts.
However... in my web (with expo/webpack-config and react-native-web) I face this exactly issue...
I don't know if I can fix it meanwhile including something in my webpack.config.js or something. I'm developing both web and apps as same time but now, I can't have my web working since having @sentry/react-native

You've said it was fixed in Sentry Expo but doesn't work for me.
This is my package.json main dependencies:

    "@expo/webpack-config": "^18.0.4",
    "@sentry/react-native": "^5.9.1",
    "expo": "~48.0.18",
    "expo-application": "~5.1.1",
    "expo-constants": "~14.2.1",
    "expo-web-browser": "~12.1.1",
    "react": "18.2.0",
    "react-native": "0.71.8",
    "react-native-web": "~0.18.11"

[krystofwoldrich]

@elenitaex5 Thank you for the information, we will take a look into this.

[krystofwoldrich]

The error is caused by the @sentry/react-native JSX code not being transpiled. We should provide guides on how to transpile the code during the web app build.

[krystofwoldrich]

Fixed by #3428