When requiring outside library, transform process hangs #2949

criticerz · 2015-09-22T21:07:43Z

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.

The text was updated successfully, but these errors were encountered:

mkonicek · 2015-09-23T18:37:32Z

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 · 2015-09-23T18:37:55Z

cc @martinbigio

criticerz · 2015-09-23T19:11:17Z

@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 · 2015-09-23T19:47:09Z

@mkonicek that's a great idea!

soulfly · 2015-09-25T19:34:21Z

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 · 2015-09-29T18:42:29Z

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

stan229 · 2015-09-30T16:03:33Z

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 · 2015-09-30T16:25:00Z

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 · 2015-10-01T10:33:28Z

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 · 2015-10-01T14:06:15Z

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 · 2015-10-01T15:35:14Z

@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 · 2015-10-01T16:15:14Z

@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 · 2015-10-01T18:35:40Z

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 · 2015-10-01T18:48:18Z

👍 Thanks for looking @amasad!

ptmt · 2015-10-03T08:21:40Z

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 · 2015-10-04T16:40:02Z

Found the problem -- submitting a diff for this.

mkonicek · 2015-10-08T20:21:39Z

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

@vjeux

Summary: @public Dead-lock trying to read package.json because it's both a "module" and a "package". in `Module.getName` it uses the cache key "name" and tries to call `Package.getName` which uses the same cache key and we end up returning the same promise that we're trying to resolve resulting in a dead-lock. This changes the cache keys for the packages that adds a prefix "package-". Reviewed By: @vjeux Differential Revision: D2506979

@vjeux

Summary: @public Dead-lock trying to read package.json because it's both a "module" and a "package". in `Module.getName` it uses the cache key "name" and tries to call `Package.getName` which uses the same cache key and we end up returning the same promise that we're trying to resolve resulting in a dead-lock. This changes the cache keys for the packages that adds a prefix "package-". Reviewed By: @vjeux Differential Revision: D2506979

mkonicek added the packager label Sep 23, 2015

criticerz mentioned this issue Sep 24, 2015

Compatibility with React Native QuickBlox/quickblox-javascript-sdk#25

Closed

amasad closed this as completed in 8356b60 Oct 4, 2015

mkonicek mentioned this issue Oct 5, 2015

[0.12] Things we should get in for the next release #2692

Closed

maraujop mentioned this issue Apr 27, 2016

Requiring unknown module "socket.io-client/socket.io" infinitered/reactotron#48

Closed

facebook locked as resolved and limited conversation to collaborators Jul 21, 2018

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 21, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

When requiring outside library, transform process hangs #2949

When requiring outside library, transform process hangs #2949

criticerz commented Sep 22, 2015

mkonicek commented Sep 23, 2015

mkonicek commented Sep 23, 2015

criticerz commented Sep 23, 2015

martinbigio commented Sep 23, 2015

soulfly commented Sep 25, 2015

jdebbink commented Sep 29, 2015

stan229 commented Sep 30, 2015

stan229 commented Sep 30, 2015

mkonicek commented Oct 1, 2015

sebmck commented Oct 1, 2015

criticerz commented Oct 1, 2015

stan229 commented Oct 1, 2015

amasad commented Oct 1, 2015

mkonicek commented Oct 1, 2015

ptmt commented Oct 3, 2015

amasad commented Oct 4, 2015

mkonicek commented Oct 8, 2015

When requiring outside library, transform process hangs #2949

When requiring outside library, transform process hangs #2949

Comments

criticerz commented Sep 22, 2015

mkonicek commented Sep 23, 2015

mkonicek commented Sep 23, 2015

criticerz commented Sep 23, 2015

martinbigio commented Sep 23, 2015

soulfly commented Sep 25, 2015

jdebbink commented Sep 29, 2015

stan229 commented Sep 30, 2015

stan229 commented Sep 30, 2015

mkonicek commented Oct 1, 2015

sebmck commented Oct 1, 2015

criticerz commented Oct 1, 2015

stan229 commented Oct 1, 2015

amasad commented Oct 1, 2015

mkonicek commented Oct 1, 2015

ptmt commented Oct 3, 2015

amasad commented Oct 4, 2015

mkonicek commented Oct 8, 2015