Support for React Native

[adamterlson]

Hey there. This is not an issue per say, more a cry for help.

Have you by some crazy chance attempted to use this plugin with React Native? It simply just doesn't seem to work. I opened a Stack Overflow issue about this. Any help would be greatly appreciated! If you're at a loss as I am, please feel free to ignore and close this issue.

[tleunen]

To be honest, I never tried it on react-native because I still never used Native yet.
But from the error you're reporting

Unable to resolve module app/components/MyComponent from .... Invalid directory /Users/node_modules/app/components/MyComponent.

It looks like the plugin doesn't transform the path correctly. The path points to Users/node_modules. It looks very weird.

Do you have by any chance a small project to easily reproduce the issue?

[adamterlson]

Hey there, I created a test project: https://github.com/adamterlson/babeltest

Thank you for your help!

By the way, if you like React and have interest in native app development at all, check out React Native. It's super awesome. :)

[tleunen]

I am very interested in React Native ;-) Just couldn't have the time to really dig into it yet.

Thanks for the setup though, I'll try to see what I can do to add the RN support.

[tleunen]

After a quick investigation, it seems the plugin is never used. That's why the path is not updated and RN cannot find the module at app/MyComponent.

I'm still not sure yet how to properly debug the babel config/loader inside react native.

[adamterlson]

Yeah, I am not sure how to do that either. Wonder why it's not used... Hmmm. Thanks for looking into it though!

[datapimp]

@adamterlson i don't believe it will work with react native because react-native has its own module aliasing and resolution approach based on their own dependency graph tools

see:

https://github.com/facebook/fbjs#usage

https://github.com/facebook/fbjs/blob/master/scripts/babel/rewrite-modules.js

[adamterlson]

@datapimp Well that's a bummer. Good find, thank you for the information!

So I take it then that the fbjs babel rewrite-modules comes first before the user-specified babel plugins? Sure would be nice if it were possible to reverse that order....

[tleunen]

Yep, from my investigation, it comes first so the plugin is not even executed because the path is not correct. I opened a ticket in react-native to see what we could do. facebook/react-native#6118

[adamterlson]

Awesome, thank you very much @tleunen.

[adamterlson]

So after reading through the issue thread (facebook/react-native#6118) it seems not part of the game plan to add this before/after hook any time soon, and at any rate, the issue is not with module-alias.

They recommend not to use ProvidesModule; however, I needed to move forward so I thought I'd share what I did in case anyone else finds this thread and wants to live dangerously.

First, I'm assuming that once fbjs is removed from RN (which is planned and probably why they don't want people using providesModule) then module-alias will work as expected. I did some experimenting and found that providesModule doesn't just take "MyModule" as in the example, you can give it any string, including something that looks like a path that corresponds to its location:

/*
 * @providesModule app/redux/modules/user
 */

In this way, I can actually require this module from a component in the precise way that module-alias would allow:

import * as UserActions from 'app/redux/modules/user';

So, once fbjs goes away, I'll delete all the providesModule lines and it should just keep working with an alias set up for "app".

That's the theory, anyway. Thank you @tleunen and @datapimp for your help!

[adamterlson]

Is it now possible? facebook/react-native@e6cb02d

[tleunen]

Hmm.. Maybe.. If someone can test it. Otherwise I'll try to find some time to give it a try

[alexbepple]

@tleunen, @adamterlson It still does not work. The RN packager somehow interferes and tries to resolve relative to node_modules/react-native/packager.

I added this to my .babelrc:

  "plugins": [
    ["babel-plugin-module-alias", [
      {"src": "./foo", "expose": "foo"}
    ]]
  ]

And this to index.android.js:

import 'foo/bar'

The result:

For comparison: if I add import 'foo/bar' to a file one level down, e.g. src/index.js, the error messages reflects that (the two dots are new):

So if we could somehow prevent the RN packager from adding the node_modules/react-native/packager bit …

Sorry that I am so non-technical here. I just do not have sufficient understanding of what is going on here to be more precise.

I tested with RN 21.