Oof, gonna remove the Danger comment for now, as it’s not helpful at this very moment.

Hey @alloy, a couple thoughts:

• Could you clarify why the Flow and TypeScript presets cannot be used simultaneously? The Flow preset contains a single transform to strip the type annotations, so I'm surprised that it would conflict with the TypeScript preset. Nevertheless, in lieu of your package script, you could explicitly add plugin-transform-flow-strip-types and configure it to requireDirective.

• Regarding the _require2 is not a function error, this is nothing more than a hunch, but... it seems to be failing on a require call that is not at the outer scope of the module. If I had to guess — given the position of the call and the name ending in 2 — one of the Babel transforms is creating an implicit, function-local variable for that require, which never gets assigned and is thus leading to that error. For these types of issues, it really helps to look directly at the transformed code. I'm probably telling you something you already know, but you can use the Web Inspector in Safari to connect to your simulator's JSContext for debugging. Given that the bug doesn't repro in remote Chrome debugging, Safari's remote debugger will be your best bet for tracking this down.

• The problem with Blob in the Chrome debugger is reminiscent of some problems I've had with RN's polyfilling system. The packaged bundle is supposed to require the InitializeCore module first, which forcibly polyfills certain globals (including fetch), but in my experience, this doesn't always happen. (I never investigated as to why, since the workaround is so simple.) My guess is that Relay (or some other code that touches the network) is being evaluated before the polyfills are installed, and that code is holding a reference to the native fetch or XHR functions (which returns a native Blob object, which fails to match the polyfilled Blob). Without running the code myself, it's difficult to say why you're executing into the polyfill if the fetch payload (via XHR) is using non-polyfilled objects... but regardless, the solution I've found for this class of issues is to add the following import at the very top of your bundle's entry-point file (e.g., index.ios.js):

import 'InitializeCore';

Hopefully this helps to get you a little closer. Let me know how it goes.

Related to Blob, I also had a similar problem with making POSTs using XMLHttpRequests

@orta Did you record details about the fetch problem you had somewhere?

I was seeing exactly the issue that was linked below it ( jhen0409/react-native-debugger#38 ) so considered that enough documentation

@jamesreggio Thanks for taking the time! I’ll respond inline:

• Could you clarify why the Flow and TypeScript presets cannot be used simultaneously?

  The two plugins simply can’t coexist as seen in the babylon source. I forgot the specific details, but it’s probably related to it being ambiguous to the parser how to parse code in the absence of hints such as file extensions.

  Nevertheless, in lieu of your package script, you could explicitly add plugin-transform-flow-strip-types and configure it to requireDirective.

  Alas not, this would still enable the flow plugin and thus lead to the same issue.

• Regarding the _require2 is not a function error, this is nothing more than a hunch, but... it seems to be failing on a require call that is not at the outer scope of the module. If I had to guess — given the position of the call and the name ending in 2 — one of the Babel transforms is creating an implicit, function-local variable for that require, which never gets assigned and is thus leading to that error. For these types of issues, it really helps to look directly at the transformed code.

  Indeed, I’ll have to comb through the compiled code. Just decided to shelf that for now, because it could be a matter of a few minutes or open a rabbit hole, for which I won’t have time this sprint :/

• The problem with Blob in the Chrome debugger is reminiscent of some problems I've had with RN's polyfilling system. […] the solution I've found for this class of issues is to add the following InitializeCore import at the very top of your bundle's entry-point file.

  Alas that did not fix the issue, but thanks for the pointer to that module anyways; it should hopefully provide me with a good starting point when I sit down to comb through the compiled code.

I’ll report back once I’ve had the time to work on this again.

Thanks for trying those out, @alloy. Too bad none of it worked 😕

Good luck, and please keep me posted!

Re the Blob issue with a debugger connected: jhen0409/react-native-debugger#209

To elaborate a bit, this is caused by doing this:

global.XMLHttpRequest = global.originalXMLHttpRequest

Ah, gotcha. So it's just down to the _require2 issue? Fingers crossed that that's easy to resolve.

@jamesreggio Looks like it! I’d love to spend some time on getting network debugging to work again as well, of course, but at least it doesn’t appear to be due to the changes in this PR.

Could we make babel plugin that uses flow only in files for node_modules/react-native but typescript everywhere else?

Our jest automated tests are busted in our React-Native (ReactXP) project because of this type of issue. I'd love to hear if anybody figures out how to resolve it!

I updated us to React Native 0.56rc which moves RN to use babel 7 - #1117

This also could handle some of the tricky integration issues around flow + TS - https://babeljs.io/blog/2018/06/26/on-consuming-and-publishing-es2015+-packages#how-babel-v7-helps

deprecated by #1210

#1210 will probably get merge in a few weeks now, so I'm closing this.