React-native bundler takes exponentially longer (eventually timing out) for very large js files.

[ScottPierce]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: macOS High Sierra 10.13.2
Node: 6.3.1
Yarn: Not Found
npm: 3.10.3
Watchman: 4.6.0
Xcode: Xcode 8.0 Build version 8A218a
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: ^16.0.0-beta.5 => 16.0.0-beta.5
react-native: ^0.51.0 => 0.51.0

Steps to Reproduce

Steps to reproduce this can be found in the README in the following repo: https://github.com/ScottPierce/ReactNativeKotlinError

Expected Behavior

That the kotlin.js file from npm, or other large javascript files, could properly be bundled with react-native.

Actual Behavior

Bundling kotlin.js freezes:

Bundlingindex.js[development, non-minified] ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░ 99.6% (476/477)

And eventually times out:

error: bundling failed: Error: TimeoutError: transforming /Users/spierce7/workspace/KotlinReactNative/kotlin.js took longer than 601 seconds.

    at _transform.then.catch.error (/Users/spierce7/workspace/KotlinReactNative/node_modules/metro-bundler/src/JSTransformer/index.js:183:28)
    at process._tickCallback (internal/process/next_tick.js:103:7)

I removed most of the content from the javascript file, and things bundled just fine. I slowly added more and more content back to the kotlin.js file, and bundling times rose exponentially. Here are some rough estimates:

At 15k lines, bundling the file took ~17 seconds.
At 18k lines, bundling the file took ~30 seconds.
At 23k lines, bundling the file took ~60 seconds.
The actual file is 37k+ lines, and times out when bundling

Reproducible Demo

https://github.com/ScottPierce/ReactNativeKotlinError

This bug was created from facebook/react-native#17485 (comment)

[rafeca]

Hey @ScottPierce, Thanks for reporting this!

This seems to be an issue with Babel, which may not have a linear execution time to transform a file. I would suggest to not transform the kotlin.js file, since I guess that this file has compiled code anyways.

You can ignore certain files from being transformed by Babel if you add an ignore pattern in your .babelrc file. Can you try to do this and let me know if this improves things?

[ScottPierce]

Hey! That works. It took a few seconds to package, but everything loaded. I created a .babelrc file next to my package.json with the following contents:

{
  "ignore": [
    "**/kotlin.js"
  ]
}

For some reason, including the babel config inside my package.json (as the documentation suggests you can do) did not work.

@rafeca Thanks! I don't suppose you have a recommendation for how to have metro include the generated sourcemaps for kotlin.js and my compiled kotlin module? Right now react-native seems to be ignoring them completely, making it impossible to debug, and also stacktraces are somewhat useless because they are based off of the generated js code.

[ds300]

@ScottPierce You can probably still parse kotlin.js in a custom transformer using only babylon (babel's parser) to get the AST and then update the AST in place using kotlin.js.map to give it the correct source mappings.

I'm assuming babylon.parse is not where the exponential algorithm is. That would be extremely unlikely.

[ScottPierce]

Closing this since the opening issue is resolved.