When requiring outside library, transform process hangs

[criticerz]

This is my index.io.js file:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var LayerAPI = require('layer-api');

var ClutchChat = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('ClutchChat', () => ClutchChat);

and my package.json file:

{
  "name": "ClutchChat",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node_modules/react-native/packager/packager.sh"
  },
  "dependencies": {
    "layer-api": "^1.0.3",
    "react-native": "^0.11.0"
  }
}

Unfortunately, when I build the app the following happens in the console:

React packager ready.

[5:06:01 PM] <START> Building Dependency Graph
[5:06:01 PM] <START> Crawling File System
Launching Dev Tools...
[5:06:03 PM] <START> request:/index.ios.bundle
[5:06:03 PM] <START> find dependencies
[5:06:03 PM] <START> request:/index.ios.bundle
tab id 1248 of window id 54

WARN: not opened
[5:06:12 PM] <END>   Crawling File System (11218ms)
[5:06:12 PM] <START> Building in-memory fs for JavaScript
[5:06:12 PM] <END>   Building in-memory fs for JavaScript (727ms)
[5:06:12 PM] <START> Building in-memory fs for Assets
[5:06:13 PM] <END>   Building in-memory fs for Assets (641ms)
[5:06:13 PM] <START> Building Haste Map
[5:06:13 PM] <START> Building (deprecated) Asset Map
[5:06:14 PM] <END>   Building (deprecated) Asset Map (172ms)
Unable to resolve module util from /Users/alain/Sites/ClutchChat/node_modules/layer-api/lib/utils.js
Unable to resolve module https from /Users/alain/Sites/ClutchChat/node_modules/layer-api/lib/request.js
Unable to resolve module util from /Users/alain/Sites/ClutchChat/node_modules/layer-api/lib/errors.js
transforming [======================================= ] 98% 309/316[5:06:14 PM] <END>   Building Haste Map (526ms)
[5:06:14 PM] <END>   Building Dependency Graph (13113ms)
[5:06:14 PM] <END>   find dependencies (10647ms)
[5:06:14 PM] <START> transform
transforming [======================================= ] 98% 310/316

And it just hangs there forever. Notice that if I take out the var LayerAPI = require('layer-api'); line it works fine.

Any ideas why that package is causing trouble? I tried another external package and the same thing happened. I made sure to install them using npm install layer-api --save

I'm using React-Native v0.11, Node v4.0.0 & npm v2.14.2.

[mkonicek]

I think we should add a --verbose option to the packager to make it easier to debug on which file the transform step got stuck.

For now, can you please debug like this?

Edit: your_app_folder/node_modules/react-native/packager/transformer.js

Add console.log('transforming: ', filename); at the beginning of the transform function.

For me this prints something like:

transforming [======================================  ] 96% 296/309transforming:  /private/tmp/AnotherAwesomeApp/node_modules/react-native/node_modules/react-tools/src/addons/shallowCompare.js
transforming [======================================  ] 96% 297/309transforming:  /private/tmp/AnotherAwesomeApp/node_modules/react-native/node_transforming [======================================= ] 96% 298/309rc/shared/utils/shallowEqual.js
transforming [======================================= ] 97% 299/309transforming:  /private/tmp/AnotherAwesomeApp/node_modules/react-native/node_modules/react-tools/src/addons/update.js

This way you'll see on which file the transform step got stuck.

[mkonicek]

cc @martinbigio

[criticerz]

@mkonicek thanks for replying quickly. Here is what I got with the console.log function in there:

React packager ready.

[3:09:22 PM] <START> Building Dependency Graph
[3:09:22 PM] <START> Crawling File System
Launching Dev Tools...

[3:09:27 PM] <START> request:/index.ios.bundle
[3:09:27 PM] <START> find dependencies
[3:09:27 PM] <START> request:/index.ios.bundle
[3:09:35 PM] <END>   Crawling File System (13077ms)
[3:09:35 PM] <START> Building in-memory fs for JavaScript
[3:09:36 PM] <END>   Building in-memory fs for JavaScript (829ms)
[3:09:36 PM] <START> Building in-memory fs for Assets
[3:09:37 PM] <END>   Building in-memory fs for Assets (817ms)
[3:09:37 PM] <START> Building Haste Map
[3:09:37 PM] <START> Building (deprecated) Asset Map
[3:09:37 PM] <END>   Building (deprecated) Asset Map (203ms)
Unable to resolve module Dimensions from /Users/alain/Sites/ClutchChat/node_modules/react-native-swiper/dist/index.js
Unable to resolve module image!issues2 from /Users/alain/Sites/ClutchChat/SearchResults.js
Unable to resolve module util from /Users/alain/Sites/ClutchChat/node_modules/layer-api/lib/utils.js
Unable to resolve module https from /Users/alain/Sites/ClutchChat/node_modules/layer-api/lib/request.js
Unable to resolve module util from /Users/alain/Sites/ClutchChat/node_modules/layer-api/lib/errors.js
transforming [======================================= ] 98% 328/335transforming:  /Users/alain/Sites/ClutchChat/node_modules/layer-api/lib/index.js
transforming:  /Users/alain/Sites/ClutchChat/index.ios.js
transforming:  /Users/alain/Sites/ClutchChat/node_modules/layer-api/lib/utils.js
transforming:  /Users/alain/Sites/ClutchChat/node_modules/layer-api/lib/request.js
transforming:  /Users/alain/Sites/ClutchChat/node_modules/layer-api/lib/errors.js
transforming:  /Users/alain/Sites/ClutchChat/node_modules/layer-api/node_modules/bluebird/js/browser/bluebird.js
[3:09:37 PM] <END>   Building Haste Map (628ms)
[3:09:37 PM] <END>   Building Dependency Graph (15352ms)
[3:09:38 PM] <END>   find dependencies (10814ms)
[3:09:38 PM] <START> transform
transforming [======================================= ] 98% 329/335

Any ideas on what to do?

[martinbigio]

@mkonicek that's a great idea!

[soulfly]

The same issue is on our side with https://www.npmjs.com/package/quickblox

I guess the main issue is with 'Unable to resolve module' logs

Do you have any ideas?

[jdebbink]

Same issue with https://www.npmjs.com/package/request

[stan229]

Same issue on my end. Looks like it's hanging with Cheerio. Note: This used to work in RN 0.8.0, and afaik in RN 0.11.0. I'm not sure what happened if I accidentally upgraded babel or something cleared its cache.

[12:01:06 PM] <START> find dependencies
transforming:  /Users/stan229/Workspaces/ClubReadyApp/node_modules/react-native/packager/react-packager/src/DependencyResolver/polyfills/prelude_dev.js
transforming:  /Users/stan229/Workspaces/ClubReadyApp/node_modules/react-native/packager/react-packager/src/DependencyResolver/polyfills/polyfills.js
transforming:  /Users/stan229/Workspaces/ClubReadyApp/node_modules/react-native/packager/react-packager/src/DependencyResolver/polyfills/Array.prototype.es6.js
transforming:  /Users/stan229/Workspaces/ClubReadyApp/node_modules/react-native/packager/react-packager/src/DependencyResolver/polyfills/error-guard.js
transforming:  /Users/stan229/Workspaces/ClubReadyApp/node_modules/react-native/Libraries/JavaScriptAppEngine/polyfills/document.js
transforming:  /Users/stan229/Workspaces/ClubReadyApp/node_modules/react-native/packager/react-packager/src/DependencyResolver/polyfills/String.prototype.es6.js
transforming:  /Users/stan229/Workspaces/ClubReadyApp/node_modules/react-native/packager/react-packager/src/DependencyResolver/polyfills/console.js

...

transforming:  /Users/stan229/Workspaces/ClubReadyApp/node_modules/cheerio/lib/static.js
transforming [======================================  ] 96% 384/402transforming:  /Users/stan229/Workspaces/ClubReadyApp/node_modules/cheerio/lib/api/css.js
transforming [======================================  ] 96% 386/402transforming:  /Users/stan229/Workspaces/ClubReadyApp/node_modules/cheerio/lib/api/forms.js
transforming [======================================= ] 97% 390/402

[stan229]

I figured out the culprit. Cheerio was requiring package.json to get the version. Babel was either unable to, or never told to transform package.json.

I figured this out by adding a console.log(response.dependencies); to node_modules/react-native/packager/react-packager/src/Bundler/index.js right before

return Promise.all(
        response.dependencies.map(

This listed the dependencies and I saw that package.json was required. I then found where in the code it was being required, removed it and was able to build my app successfully.

[mkonicek]

Thanks for all the examples and sorry for the delay - I just returned from vacation. Passing this to Sebastian McKenzie who works on Babel to take a look.

[sebmck]

I don't think it's Babel. I don't think the packager supports loading JSON files. You can set the environment variable DEBUG to babel to output some Babel debug information to find out if it's actually the cause, eg. $ debug=babel PACKAGE_COMMAND_HERE.

[criticerz]

@stan229 I tried that but I wasn't able to figure out how to find where the package.json file was required to remove that. Any tips there?

[stan229]

@criticerz try adding that console.log(response.dependencies) that I mentioned earlier. See what file it's trying to open, may not be package.json even.

[amasad]

We do support JSON file loading. I'll look into what's going on with cheerio. We should stop trying to transform JS files in node_modules (we have to do this with react and react-native but nothing else).

Also, recently added: You can also see debug logs in the packager using DEBUG=ReactNativePackager:*.

EDIT: It should be DEBUG=ReactNativePackager:* instead of DEBUG=ReactNativePackager

[mkonicek]

:+1: Thanks for looking @amasad!

[ptmt]

I had the same problem with cheerio using react-native-webpack-server. Because of this line in cheerio/index.js:

/*
  Export the version
*/

exports.version = require('./package').version;

I've just added json loader to webpack config.

[amasad]

Found the problem -- submitting a diff for this.

[mkonicek]

Will be cutting 0.13-rc soon which will contain this fix.