Issue with bundler while using Platform.select in release build

[varungupta85]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: macOS Sierra 10.12.6
Node: 8.2.1
Yarn: 1.1.0
npm: 5.3.0
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 2.3 AI-162.4069837

Packages: (wanted => installed)
react: ^16.2.0 => 16.2.0
react-native: ^0.52.2 => 0.52.2

Target Platform: iOS and Android

Steps to Reproduce

I have a react-native app in production for the last few months. I updated to latest react-native 0.52.2 and started to see some strange problems with Platform.select behaviour only in the release app. Values set using Platform.select were not set in certain cases. I was able to confirm it by updating the release app to print logs. I want to emphasise again that it happens only in release app and NOT in development app. Below are some code excerpts that work and don't work.

// I have a reusable module to show a context menu.
// It exposes an API `ContextMenu.show(options)` that can be used to show the context menu.
// The items in the context menu could be different on iOS vs Android. 
// Below piece of code used to work before I updated to 0.52.2 but it doesn't work now.

let ctxOptions = {
  items: Platform.select({
    'ios': showDelete ? [I18n.t('takePhoto'), I18n.t('chooseFromLibrary'), I18n.t('delete'), I18n.t('cancel')] :
      [I18n.t('takePhoto'), I18n.t('chooseFromLibrary'), I18n.t('cancel')],
    'android': showDelete ? [I18n.t('takePhoto'), I18n.t('chooseFromLibrary'), I18n.t('delete')] :
      [I18n.t('takePhoto'), I18n.t('chooseFromLibrary')]
  }),
  info: Platform.select({
    'ios': {
      destructiveButtonIndex: showDelete ? 2 : undefined,
      cancelButtonIndex: showDelete ? 3 : 2
    },
    'android': {}
  })
}

// Both info and items are undefined on both iOS and Android
ContextMenu.show(ctxOptions)

// I changed the above code to not use Platform.select but just pick the right object based on Platform.OS value without changing anything else and this works

let ctxOptions = {
  items: ({
    'ios': showDelete ? [I18n.t('takePhoto'), I18n.t('chooseFromLibrary'), I18n.t('delete'), I18n.t('cancel')] :
      [I18n.t('takePhoto'), I18n.t('chooseFromLibrary'), I18n.t('cancel')],
    'android': showDelete ? [I18n.t('takePhoto'), I18n.t('chooseFromLibrary'), I18n.t('delete')] :
      [I18n.t('takePhoto'), I18n.t('chooseFromLibrary')]
  })[Platform.OS],
  info: ({
    'ios': {
      destructiveButtonIndex: showDelete ? 2 : undefined,
      cancelButtonIndex: showDelete ? 3 : 2
    },
    'android': {}
  })[Platform.OS]
}

// Both info and items are set according to the OS
ContextMenu.show(ctxOptions)

// I also changed the above statements to ternary statements using Platform.OS and that works as well.

I am using Platform.select at other places such as styles such as below where it works as expected.

const styles = StyleSheet.create({
  container: Platform.select({
    android: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'rgba(0, 0, 0, 0.4)',
    },
    ios: {
      justifyContent: 'center',
      alignItems: 'center',
    },
  })
})

This leads me to believe that this may be an issue with the bundler used in the release app causing the values to be not set.

Expected Behavior

The values set using Platform.select should be set according to the OS

Actual Behavior

The values were not set as described above.

Reproducible Demo

I have created a new project which can be downloaded from here. In the App.js file, in componentDidMount, there are two calls: one with Platform.select and the other with Platform.OS as described above. The app will abort when Platform.select section is not commented out and wouldn't abort when Platform.OS section is not commented out only in the release builds.

[brunolemos]

Hi @varungupta85, thanks for reporting!
I was able to reproduce the bug.

Here is a smaller version for reproduction:

const select1 = Platform.select({ ios: 'ios', default: 'default' })
const select2 = Platform.select({ 'ios': 'ios', default: 'default' })
const select3 = Platform.select({ 'ios': 'ios', 'default': 'default' })

alert(`OS: ${Platform.OS}, 1: ${select1}, 2: ${select2}, 3: ${select3}`)
// expected:          OS: ios, 1: ios, 2: ios, 3: ios
// result on release: OS: ios, 1: ios, 2: default, 3: undefined

As you can see, this bug is happening when you write the object keys using quotes.

As a workaround , please remove the quotes for now, while this issue is not fixed.

Thank you!

[brunolemos]

After more investigation, it works fine on 0.51.0 and was introduced on 0.52.0.
Not sure which commit, but my guess would be this metro bundler version bump: 0bbd9f0

cc @rafeca

[varungupta85]

@brunolemos Thanks for investigating the issue further and wow, I didn't realise that the quotes in the key names could have caused this. I guess, I shouldn't take anything for granted 😃 Thanks for the workaround. I will check other places in my code as well where I may be using quotes in the key names.

[varungupta85]

I am a little confused by where does this problem affect and where it doesn't. For e.g., I have an object defined as below:

    CascadingAlarmIntervals: {
      '5mins': {
        label: I18n.t('minutes', {count: 5}),
        value: 300000
      },
      '10mins': {
        label: I18n.t('minutes', {count: 10}),
        value: 600000
      },
      '15mins': {
        label: I18n.t('minutes', {count: 15}),
        value: 900000
      },
      '30mins': {
        label: I18n.t('minutes', {count: 30}),
        value: 1800000
      },
      '1hr': {
        label: I18n.t('hours', {count: 1}),
        value: 3600000
      },
      '2hr': {
        label: I18n.t('hours', {count: 2}),
        value: 7200000
      },
      '3hr': {
        label: I18n.t('hours', {count: 3}),
        value: 10800000
      }
    }

This works fine even though the key names have strings. I can't change the key names to be not strings because they start with a number and eslint throws an error.

[rafeca]

This could have been caused by one of the changes in metro. At this point it's hard for me to bisect the actual metro change since lots of things changed between the metro version in RN 0.51 and 0.52 (we almost rebuilt the bundling logic).

If anybody is up to fix it, the logic that needs to be updated is the one in inline-platform.js, which transform the Platform.select() calls in prod to remove the non-used platforms (so if you have Platform.select({ios: require('implementation-ios.js'), android: require('implementation-android.js')});, when you build the iOS app the android code won't be included in the bundle, and viceversa).

@varungupta85 : the last code you posted should work fine (the issue only affects Platform.select() calls).

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

[salmanwaheed]

This message was created automatically by mail delivery software. A message that you sent could not be delivered to one or more of its recipients. This is a temporary error. The following address(es) deferred: mkdirenv@gmail.com Domain salmanwaheed.info has exceeded the max emails per hour (162/150 (108%)) allowed. Message will be reattempted later

…

------- This is a copy of the message, including all the headers. ------ Received: from github-smtp2-ext8.iad.github.net ([192.30.252.199]:53048 helo=github-smtp2a-ext-cp1-prd.iad.github.net) by box1177.bluehost.com with esmtps (TLSv1.2:ECDHE-RSA-AES256-GCM-SHA384:256) (Exim 4.89_1) (envelope-from <noreply@github.com>) id 1epQUw-003Izg-3s for hello@salmanwaheed.info; Fri, 23 Feb 2018 20:27:42 -0700 Date: Fri, 23 Feb 2018 19:22:00 -0800 DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=github.com; s=pf2014; t=1519442840; bh=cZQPukJoFWWKknSkxiI981LaODyuP7HaCDQMzEUCI6c=; h=From:Reply-To:To:Cc:In-Reply-To:References:Subject:List-ID: List-Archive:List-Post:List-Unsubscribe:From; b=ZQLfe3u1Qw05HBQycgCXrZ2Bx12PbyZtgPwdGwEZv3mdk0q7cOEFgRoNkFSWD01VC CQruB6vVfHqQGrPbmiDU8OaTUWXtfGdZAGjp+7YHdoVuWB9/NhohxZk0/VlW7dd5A0 aXHlJORgI/gu1S+C0FKLQUpTmlCDPHKmcGO64dmY= From: React Native Bot <notifications@github.com> Reply-To: facebook/react-native <reply@reply.github.com> To: facebook/react-native <react-native@noreply.github.com> Cc: Subscribed <subscribed@noreply.github.com> Message-ID: <facebook/react-native/issue/17852/issue_event/1490267187@github.com> In-Reply-To: <facebook/react-native/issues/17852@github.com> References: <facebook/react-native/issues/17852@github.com> Subject: Re: [facebook/react-native] Issue with bundler while using Platform.select in release build (#17852) Mime-Version: 1.0 Content-Type: multipart/alternative; boundary="--==_mimepart_5a90da58c128e_2b4e03f82efa5ef2c45042b"; charset=UTF-8 Content-Transfer-Encoding: 7bit Precedence: list X-GitHub-Sender: react-native-bot X-GitHub-Recipient: salmanwaheed X-GitHub-Reason: subscribed List-ID: facebook/react-native <react-native.facebook.github.com> List-Archive: https://github.com/facebook/react-native List-Post: <mailto:reply@reply.github.com> List-Unsubscribe: <mailto:unsub+00ef1b38fb72ff80c96879e4b1055b78ca039e870ff6b9d992cf0000000116a89c5892a169ce118905f4@reply.github.com>, <https://github.com/notifications/unsubscribe/AO8bOFLSCBwB8Wrif_sVWOP-Xbf4kwvTks5tX4BYgaJpZM4R4jAa> X-Auto-Response-Suppress: All X-GitHub-Recipient-Address: hello@salmanwaheed.info X-Spam-Status: No, score=0.8 X-Spam-Score: 8 X-Spam-Bar: / X-Ham-Report: Spam detection software, running on the system "box1177.bluehost.com", has NOT identified this incoming email as spam. The original message has been attached to this so you can view it or label similar future email. If you have any questions, see root\@localhost for details. Content preview: Closed #17852. -- You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub: #17852 (comment) [...] Content analysis details: (0.8 points, 5.0 required) pts rule name description ---- ---------------------- -------------------------------------------------- 0.0 URIBL_BLOCKED ADMINISTRATOR NOTICE: The query to URIBL was blocked. See http://wiki.apache.org/spamassassin/DnsBlocklists#dnsbl-block for more information. [URIs: github.com] -0.5 SPF_PASS SPF: sender matches SPF record 1.3 HTML_IMAGE_ONLY_24 BODY: HTML: images with 2000-2400 bytes of words 0.0 HTML_MESSAGE BODY: HTML included in message 2.5 DCC_CHECK No description available. -0.1 DKIM_VALID_AU Message has a valid DKIM or DK signature from author's domain -0.1 DKIM_VALID Message has at least one valid DKIM or DK signature 0.1 DKIM_SIGNED Message has a DKIM or DK signature, not necessarily valid -2.3 AWL AWL: Adjusted score from AWL reputation of From: address X-Spam-Flag: NO

----==_mimepart_5a90da58c128e_2b4e03f82efa5ef2c45042b Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 7bit Closed #17852.

-- You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub: #17852 (comment) ----==_mimepart_5a90da58c128e_2b4e03f82efa5ef2c45042b Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: 7bit <p>Closed <a href="#17852" class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="294192628" data-permission-text="Issue title is private" data-url="#17852> <p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">&mdash;<br />You are receiving this because you are subscribed to this thread.<br />Reply to this email directly, <a href="#17852 (comment) it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AO8bOKl8t21LGo0xtTmKWGFIoJ5_1H1Gks5tX4BYgaJpZM4R4jAa">mute the thread</a>.<img alt="" height="1" src="https://github.com/notifications/beacon/AO8bOJ9Ok07b9N-AVG_nCMIjTfPz3gnXks5tX4BYgaJpZM4R4jAa.gif" width="1" /></p> <div itemscope itemtype="http://schema.org/EmailMessage"> <div itemprop="action" itemscope itemtype="http://schema.org/ViewAction"> <link itemprop="url" href="#17852 (comment)> <meta itemprop="name" content="View Issue"></meta> </div> <meta itemprop="description" content="View this Issue on GitHub"></meta> </div> <script type="application/json" data-scope="inboxmarkup">{"api_version":"1.0","publisher":{"api_key":"05dde50f1d1a384dd78767c55493e4bb","name":"GitHub"},"entity":{"external_key":"github/facebook/react-native","title":"facebook/react-native","subtitle":"GitHub repository","main_image_url":"https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png","avatar_image_url":"https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png","action":{"name":"Open in GitHub","url":"https://github.com/facebook/react-native"}},"updates":{"snippets":[{"icon":"DESCRIPTION","message":"Closed #17852."}],"action":{"name":"View Issue","url":"#17852 (comment)> ----==_mimepart_5a90da58c128e_2b4e03f82efa5ef2c45042b--