Unable to resolve modules on latest Expo with Metro web

[ocho-cesar]

When trying to build my react-native app with the latest metro web bundler using Expo, I get the next error

> Unable to resolve "@lukeed/uuid" from "node_modules/@segment/analytics-next/dist/pkg/core/events/index.js"

Possibly related to aws-amplify/amplify-js#11474

[silesky]

Hey @ocho-cesar. It was working before the expo update?

Anyway, closing because this package does not officially support react native -- please use https://github.com/segmentio/analytics-react-native.

[ocho-cesar]

@silesky yes, it was working before it. And was opening this here because I was running expo in the web environment, that is no react-native (hermes) runtime, but in a web environment using metro as the bundler.

[Jackman3005]

Hi @silesky , it would be great to re-open this issue.

I too receive the exact same error message @ocho-cesar is receiving when trying to use the metro bundler for Web.

We cannot switch to the package you mentioned because analytics-react-native does not yet support Web as discussed in this issue which is over a year old.

Those of us using Segment are forced to include both libraries and use the correct one based on the current platform. Which has been just fine for us for quite some time on both mobile and web in production. Albeit with the webpack bundler, not the metro bundler.

There seems to be some issue with the combination of the Metro bundler for RN Web and this import from @segmentio/analytics-next

[Jackman3005]

I tried commenting out all the Analytics code to see if it was the only error I'm receiving when trying to bundle for RN Web using Metro. It was not, I was also receiving the same error noted in this issue with react-native-maps. I was able to temporarily "patch" that problem with the fix mentioned in the issue and can confirm that I am able to bundle for RN Web with metro after that.

That being the case, I think this issue does deserve to be on the Segment side and I suspect it should be solvable with the hints in the react-native-maps issue linked and the issues it links to.

For context, we have 108 Dependencies in our project, and only two were causing issues when trying to bundle with metro for Web.

[silesky]

@Jackman3005 Sure, temporarily Opening for visibility in case others come by!

Per @ocho-cesar's link, multiple issues have pointed to this solution:

// add support for .mjs files in metro.config.js:

config.resolver.sourceExts.push("mjs");

aws-amplify/amplify-js#11474 (comment)

Was this the solution that worked for you? If not, please give this a try and report back.

In overall favor of a non-segment issue, here is the order of events:

• Analytics worked previously in Metro bundler
• Metro bundler updated
• Analytics broke.... while continuing to work on all other common bundlers like vite and webpack.

So, while I am sympathetic, this is an issue with the new version of the metro bundler, and I'd like to see them release an official fix on their side, since everything we're doing here appears to be vanilla. It's not out of the questions but I'd rather not swap a dependency that has been working for us for a long time because of a regression in a bundler used by a small subset of users.

I would further recommend adding your +1 to the existing Metro PR issues.
facebook/metro#1003

if there is a simple 'permanent' solution that you've researched, PRs welcome. I skimmed your link and an obvious tweak didn't jump out at me, and we don't target react native web as a test or "officially" support, so community contributions would be useful here, as we are spread thin and we could not make any guarantees about this getting on our roadmap.

[Jackman3005]

Hi @silesky Thanks for the detailed message. Now that I understand it better, I am inclined to agree with you. I will give the fix a try and continue the conversation on the metro bundler side.

[jparksecurity]

@silesky Hi, Sorry for pinging you on the closed issue.

I think the issue is that Metro uses a module entry instead of main. Could Segment consider adding react-native in package.json?

I opened an issue in Expo to discuss this Metro issue. One thing an Expo team member mentioned was

Preferably, if Segment is willing to make it work out of the box for React Native, they should add a react-native field with the CJS version of the package. That should get picked up properly by Metro.

My issue in Expo: expo/expo#27902 (comment)