Babel plugins registration goes wrong with npm link

[thenewvu]

Hello RN team,

I'm working on a custom project generator, which's taking advantage from npm link to sync changes easily with a local RN repo.

The project structure looks like this:

├── android
├── hybrid
│   └── index.android.js
├── node_modules
│   └── react-native -> /home/vu/.npm/lib/node_modules/react-native
└── package.json

As you see, the react-native is linking to the global module, which's linking again to the local RN:

$ ln -s /home/vu/.npm/lib/node_modules/react-native

/home/vu/.npm/lib/node_modules/react-native -> /data/projects/react-native-td/

The problem is I can not run the local CLI from the project directory:

$ ./node_modules/react-native/packager/packager.sh

/data/projects/react-native-td/node_modules/babel-core/lib/transformation/file/options/option-manager.js:181
          throw new ReferenceError(messages.get("pluginUnknown", plugin, loc, i));
          ^

ReferenceError: Unknown plugin "syntax-async-functions" specified in "foreign" at 0
    at /data/projects/react-native-td/node_modules/babel-core/lib/transformation/file/options/option-manager.js:181:17
    at Array.map (native)
    at Function.normalisePlugins (/data/projects/react-native-td/node_modules/babel-core/lib/transformation/file/options/option-manager.js:163:20)
    at OptionManager.mergeOptions (/data/projects/react-native-td/node_modules/babel-core/lib/transformation/file/options/option-manager.js:259:36)
    at compile (/data/projects/react-native-td/node_modules/babel-register/lib/node.js:87:15)
    at loader (/data/projects/react-native-td/node_modules/babel-register/lib/node.js:128:14)
    at Object.require.extensions.(anonymous function) [as .js] (/data/projects/react-native-td/node_modules/babel-register/lib/node.js:138:7)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:313:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)

My first solution is to put this to the project's package.json:

  "scripts": {
    "start": "projectRootPath=$(pwd); cd <%= ReactNativePath %> ; node ./local-cli/cli.js start --root $projectRootPath"
  },

But it's so painful if I also need to add bundle or other commands.

After few hours, my next solution is to make this change in the local RN:

diff --git a/cli.js b/cli.js
old mode 100644
new mode 100755
index 13b3ce7..3385127
--- a/cli.js
+++ b/cli.js
@@ -1,3 +1,5 @@
+#!/usr/bin/env node
+
 /**
  * Copyright (c) 2015-present, Facebook, Inc.
  * All rights reserved.
@@ -8,8 +10,16 @@
  */
 'use strict';

+process.chdir(__dirname);
+
 require('./packager/babelRegisterOnly')([
   /private-cli\/src/
 ]);

-module.exports = require('./local-cli/cli.js');
+var localCli = require('./local-cli/cli.js');
+
+if (require.main === module) {
+  localCli.run();
+}
+
+module.exports = localCli;
\ No newline at end of file
diff --git a/package.json b/package.json
index 2231a1d..ff0dc4f 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
     "start": "/usr/bin/env bash -c './packager/packager.sh \"$@\" || true' --"
   },
   "bin": {
-    "react-native": "local-cli/wrong-react-native.js"
+    "react-native": "cli.js"

So now I only need to add this to the project's package.json:

  "scripts": {
    "start": "react-native start --root $(pwd)"
  },

But one thing makes me so confuse is why this:

  "bin": {
    "react-native": "local-cli/wrong-react-native.js"
  },

Is the team having some future plan ? My simple solution can make any break to other parts of RN ?

Thank you,

[facebook-github-bot]

Hey thenewvu, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If this is a feature request or a bug that you would like to be fixed by the team, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• If you don't know how to do something or not sure whether some behavior is expected or a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• We welcome clear issues and PRs that are ready for in-depth discussion; thank you for your contributions!

[thenewvu]

Moreover, this solution affects to building android project in release mode. The packager can't find out the entry file, because it can't find the right app project root directory.

About Babel plugins registration, some commits that I think they relate to the problem, you can see latest commits of this file. Doesn't it make any sense ?

[satya164]

@thenewvu RN packager doesn't support symlinks. You might wanna place the project inside the node_modules folder.

[thenewvu]

@satya164 Thank you. It's a life-hacked feature if exists. I'm going to give few days to dig into the internal of packager and hot-loading server, hope get some help from here.

[satya164]

@thenewvu The reason packager doesn't support symlink is because watchman doesn't support them, and supporting symlinks is very hard.

RN issue - #637
Watchman issue - facebook/watchman#105