Cannot find module '@sentry/react-native/expo'

[jagthedrummer]

OS:

• [ ] Windows
• [x] MacOS
• [ ] Linux

Platform:

• [x] iOS
• [x] Android

SDK:

• [x] @sentry/react-native (>= 1.0.0)
• [ ] react-native-sentry (<= 0.43.2)

SDK version: 5.19.2

react-native version: 0.72.10

Are you using Expo?

• [x] Yes
• [ ] No

Are you using sentry.io or on-premise?

• [x] sentry.io (SaaS)
• [ ] on-premise

If you are using sentry.io, please post a link to your issue so we can take a look:

N/A

Configuration:

(@sentry/react-native)

Sentry.init({
  dsn: 'https://[email protected]/45068...'
});

---

I have the following issue:

The instructions from the install wizard are unclear and suggest things that left metro.config.js in a broken state.

Steps to reproduce:

• Step 1 - Run npx @sentry/wizard@latest -s -i reactNative
• Step 2 - On the step for modifying metro.config.js it says this:

Add the following code to your metro.config.js file:

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');";
const {createSentryMetroSerializer} = require('@sentry/react-native/dist/js/tools/sentryMetroSerializer');

const config = {
  serializer: {
    customSerializer: createSentryMetroSerializer(),
  },
};

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

Screenshot of problematic suggestion:

There are a few problems with the suggested code:

1. There's an extra "; on the first line that causes a syntax error and just completely breaks everything.

Instead of:

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');";

It should be:

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

2. In a default Expo project getDefaultConfig is required from expo/metro-config and @react-native/metro-config isn't installed. So after resolving the syntax error caused by the extra "; I ran into Cannot find module '@react-native/metro-config'.

My original metro.config.js looked like this:

const { getDefaultConfig } = require('expo/metro-config');
module.exports = getDefaultConfig(__dirname);

Since I didn't see mergeConfig in there anywhere, I tried to require it from @react-native/metro-config as suggested, but that's not installed in an Expo project.

I finally found that I can require it from metro-config (no prefix).

The metro.config.js that I finally got to work for me looks like this:

const {getDefaultConfig} = require('expo/metro-config');
const { mergeConfig } = require('metro-config');
const {createSentryMetroSerializer} = require('@sentry/react-native/dist/js/tools/sentryMetroSerializer');

const config = {
  serializer: {
    customSerializer: createSentryMetroSerializer(),
  },
};

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

Actual result:

metro.config.js is easy to screw up if you don't understand how to modify the suggested code for Expo.

The wizard suggests that you need this at the top of metro.config.js:

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');";

Expected result:

metro.config.js should be easy to get right.

The wizard should suggest that you need this at the top of metro.config.js:

const {getDefaultConfig} = require('expo/metro-config');
const { mergeConfig } = require('metro-config');

Symptoms:

It took me a while to figure out what was going on, and some of the symptoms that I saw didn't have a stack trace or anything that I could work from, so I wanted to mention them here, just in case it helps out someone down the road.

The first thing that I noticed was that I couldn't produce a build:

$ eas build --platform all --auto-submit
★ [email protected] is now available.
To upgrade, run npm install -g eas-cli.
Proceeding with outdated version.

Loaded "env" configuration for the "production" profile: no environment variables specified. Learn more: https://docs.expo.dev/build-reference/variables/
✔ Incremented versionCode from 46 to 47.

🤖 Android build
Invalid or unexpected token
    Error: build command failed.

This was happening locally and in CI. (Oddly enough after I installed and completed the wizard I had managed to send a test error. I think that I already had my project running and hadn't restarted it after installing Sentry, and that when it auto-reloaded that Sentry had everything it needed to work.)

Finally I stopped my local Expo server and then tried to restart it, at which point I got something more useful in pointing me to the errors:

$ yarn tunnel
yarn run v1.22.19
$ expo start --tunnel
Starting project at /Users/jgreen/projects/norman-music-fest-mobile-app
SyntaxError: Invalid or unexpected token
/Users/jgreen/projects/norman-music-fest-mobile-app/metro.config.js:2
const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');";
                                                                              ^^

SyntaxError: Invalid or unexpected token

And then once I fixed the syntax error I ran into the error about @react-native/metro-config:

$ yarn tunnel
yarn run v1.22.19
$ expo start --tunnel
Starting project at /Users/jgreen/projects/norman-music-fest-mobile-app
Error: Cannot find module '@react-native/metro-config'
Require stack:
- /Users/jgreen/projects/norman-music-fest-mobile-app/metro.config.js

[krystofwoldrich]

Hi @jagthedrummer, Thank you for the message, @sentry/wizard currently doesn't support the Expo project, but we are working on adding the support.

Please, follow these instructions to add Sentry to your Expo project.

https://docs.sentry.io/platforms/react-native/manual-setup/expo/

Let us know if you run into any issues.

[jagthedrummer]

It would be helpful if the README for this package mentioned the Expo instructions somewhere. It's currently very misleading and makes it seem like the instructions in the README are the way to go.

The only mention of Expo is that support for it is listed as a "Feature":

And if you click through the sentry-expo link you're taken to a page that points you right back to this repo.

There's no way to know that the other page of documentation even exists, unless you already know that it exists.

[jagthedrummer]

@krystofwoldrich the instructions that you linked to don't seem to work. After following all of the instructions and trying to start my app I'm getting this error:

$ yarn tunnel
yarn run v1.22.19
$ expo start --tunnel
Starting project at /Users/jgreen/projects/norman-music-fest-mobile-app
Error: Error reading Expo config at /Users/jgreen/projects/norman-music-fest-mobile-app/app.config.js:

Cannot find module '@sentry/react-native/expo'
Require stack:
- /Users/jgreen/projects/norman-music-fest-mobile-app/app.config.js
- /Users/jgreen/projects/norman-music-fest-mobile-app/node_modules/@expo/config/build/evalConfig.js
- /Users/jgreen/projects/norman-music-fest-mobile-app/node_modules/@expo/config/build/getConfig.js
- /Users/jgreen/projects/norman-music-fest-mobile-app/node_modules/@expo/config/build/Config.js
- /Users/jgreen/projects/norman-music-fest-mobile-app/node_modules/@expo/config/build/index.js
- /Users/jgreen/projects/norman-music-fest-mobile-app/node_modules/@expo/cli/build/src/utils/analytics/getDevClientProperties.js
- /Users/jgreen/projects/norman-music-fest-mobile-app/node_modules/@expo/cli/build/src/start/resolveOptions.js
- /Users/jgreen/projects/norman-music-fest-mobile-app/node_modules/@expo/cli/build/src/start/index.js
- /Users/jgreen/projects/norman-music-fest-mobile-app/node_modules/@expo/cli/build/bin/cli
- /Users/jgreen/projects/norman-music-fest-mobile-app/node_modules/expo/bin/cli

[krystofwoldrich]

@jagthedrummer Thank you for mentioning the old link in the readme, that's truly confusing, we'll update that right away.

Sadly I can't reproduce the error, does /Users/jgreen/projects/norman-music-fest-mobile-app/node_modules/@sentry/react-native/expo.js exist?

If you have sentry-expo installed, remove it. This could be corrupted node_modules, can you try to delete them and install again?

[jagthedrummer]

I think the Cannot find module '@sentry/react-native/expo' error was related to a dependency disagreement between entry/react-native/expo and the version of expo that I was running.

[krystofwoldrich]

@jagthedrummer Thank you for the message, happy to hear it resolved.