Platform select on web falls back native when bundling with metro

[jparksecurity]

Summary

Ref: https://discord.com/channels/695411232856997968/1219438969763401878/1219438969763401878

what the expected behavior is

Platform.select falls back to default, which does on expo start --web, when web is not specified.

what is actually happening

Platform.select falls back to native when bundling with metro by expo export --platform web.

What platform(s) does this occur on?

Web

SDK Version

50

Environment

  expo-env-info 1.2.0 environment info:
   System:
     OS: macOS 14.4
     Shell: 5.9 - /bin/zsh
   Binaries:
     Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
     Yarn: 4.0.1 - ~/.nvm/versions/node/v20.11.1/bin/yarn
     npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
   SDKs:
     iOS SDK:
       Platforms: DriverKit 23.2, iOS 17.2, macOS 14.2, tvOS 17.2, watchOS 10.2
   IDEs:
     Android Studio: 2023.1 AI-231.9392.1.2311.11330709
     Xcode: 15.1/15C65 - /usr/bin/xcodebuild
   npmPackages:
     babel-preset-expo: ^10.0.0 => 10.0.1 
     expo: ~50.0.11 => 50.0.11 
     react: 18.2.0 => 18.2.0 
     react-dom: 18.2.0 => 18.2.0 
     react-native: 0.73.4 => 0.73.4 
     react-native-web: ^0.19.10 => 0.19.10 
   Expo Workflow: managed

Minimal reproducible example

https://github.com/jparksecurity/platform-select

Run yarn web to check if Platform.select falls back to default.

Then, run yarn expo export --platform web.

1. Check the app entry js under dist/_expo/static/js/web and search Open up App.js to start working on your app!. You will see native next to this text.
2. Or serve it locally(npx serve dist --single) to check in a browser.

[jparksecurity]

@keith-kurak FYI

[expo-bot]

Thank you for filing this issue!
This comment acknowledges we believe this may be a bug and there’s enough information to investigate it.
However, we can’t promise any sort of timeline for resolution. We prioritize issues based on severity, breadth of impact, and alignment with our roadmap. If you’d like to help move it more quickly, you can continue to investigate it more deeply and/or you can open a pull request that fixes the cause.

[byCedric]

Hi @jparksecurity! Thanks for creating this issue. Unfortunately, this is a bug inside Metro itself. To give you a quick summary:

• The Platform API is a bundler feature, built into Metro (Platform.select's code).
• This babel transformation step removes the Platform code and pulls out the platform-specific value for Platform.select when bundling for that platform only
  (e.g. const test = Platform.select({ default: 'test' }) -> const test = 'test'
  • Unfortunately, this plugin is incorrect for web platforms, as it tries to fallback to native before default. So, if the web property is not defined within the select options (e.g. Platform.select({ web: 'web' }), it will try native first before default.
• We've fixed this for SDK 51 by moving away from metro-transform-plugins/src/inline-plugin
  • Specifically, this was fixed in feat(babel): write new inline Platform module plugin #27533 where we handle web platforms without trying to resolve native: https://github.com/expo/expo/pull/27533/files#diff-b16fbc1eb978b82eccb925145243daa02d164bf53a2a90f7d52edd2aedc0d35cR23-R25

Since this is quite a big change, I'm not sure if we can backport this to SDK 50, but I'll check.

To avoid this issue, you could add the Platform.select({ web: 'web' }) property, or use Platform.OS === 'web', which should work fine for SDK 50 right now.

Hope this helps!

[jparksecurity]

@byCedric Thank you for the detailed explanation! Sorry, I didn't realize the fix had been merged. I'll keep an eye out for the fix release!