Babel plugin (babel-plugin-module-alias) with React Native
<p>I am wanting to use <a href="https://github.com/tleunen/babel-plugin-module-alias" rel="nofollow">babel-plugin-module-alias</a> for transforming module paths from <code>../../../../components/foo</code> into <code>app/components/foo</code> in my React Native project.</p>

<p>I have attempted to modify the babel config in two places independently, neither works.</p>

<p>One, at the root of my project next to the <code>index.ios.js</code>:</p>

<pre><code>{
  "plugins": [
    ["babel-plugin-module-alias", [
      { "src": "./app", "expose": "app" }
    ]]
  ]
}
</code></pre>

<p>And two, at <code>/node_modules/react-native/packager/react-packager/.babelrc</code>:</p>

<pre><code>{
  "retainLines": true,
  "compact": true,
  "comments": false,
  "plugins": [
    ["babel-plugin-module-alias", [
      { "src": "./app", "expose": "app" }
    ]],
    "syntax-async-functions",
    "syntax-class-properties",
    "syntax-trailing-function-commas",
    "transform-class-properties",
    "transform-es2015-arrow-functions",
    "transform-es2015-block-scoping",
    "transform-es2015-classes",
    "transform-es2015-computed-properties",
    "transform-es2015-constants",
    "transform-es2015-destructuring",
    ["transform-es2015-modules-commonjs", {"strict": false, "allowTopLevelThis": true}],
    "transform-es2015-parameters",
    "transform-es2015-shorthand-properties",
    "transform-es2015-spread",
    "transform-es2015-template-literals",
    "transform-flow-strip-types",
    "transform-object-assign",
    "transform-object-rest-spread",
    "transform-react-display-name",
    "transform-react-jsx",
    "transform-regenerator",
    "transform-es2015-for-of"
  ],
  "sourceMaps": false
}
</code></pre>

<p>It doesn't throw any errors, simply trying to require a module as such <code>import MyComponent from 'app/components/MyComponent';</code> yields the error:</p>

<p><code>Unable to resolve module app/components/MyComponent from .... Invalid directory /Users/node_modules/app/components/MyComponent</code>.</p>

<p>I have tried nuking every cache I'm aware of:</p>

<pre><code>watchman watch-del-all
rm -rf $TMPDIR/react-*
./node_modules/react-native/packager/packager.sh start --resetCache
</code></pre>

<p>Any further ideas would be greatly appreciated!</p>