React Native Packager - Module replacement?

[jacobrosenthal]

Im not sure how/if module replacement is supposed to work in react packager. Or maybe we need to look into https://github.com/mjohnston/react-native-webpack-server ?

For now Im (sadly) editing files manually

//var noble = require('noble');
var noble = require('react-native-ble');

But its a deep rabbit hole. The eddystone-url-encoding module does a json require without specifying the extension which the react native packager doesnt seem to support

// var prefixes = require('./prefixes');
var prefixes = require('./prefixes.json');
// var suffixes = require('./suffixes');
var suffixes = require('./suffixes.json');

[jacobrosenthal]

Im not sure why, but utilizing the react-native-webpack-server's example this works properly, but not when with a react native generated template and following their readme. Tracking here mjohnston/react-native-webpack-server#75

For now, Ive added an example based on their example thats working great.

[jacobrosenthal]

react-native-webpack-server seems poorly supported now, and react is holding steadfast on their packager.
Ive killed the react-native-webpack-server in the example for now, which means no aliasing again.
facebook/react-native#5917 and https://productpains.com/post/react-native/packager-support-resolvealias-ala-webpack/ need your upvotes.

[jacobrosenthal]

This was solved (I dont know what release) by using the default packager and the browser field in package.json

  "browser": {
    "noble": "react-native-ble"
  },

[jacobrosenthal]

Current packager only alias's one level deep it would seem. So we can use var noble = require('noble') in our main file, but if we var Bean = require('ble-bean'); which does its own noble require, it fails out because its trying to us actual noble :(

[jacobrosenthal]

Here is the current issue that is asking for global aliasing. Please bump
facebook/react-native#6253

[jacobrosenthal]

I have a PR in with preliminary deep shim support facebook/react-native#9899 PRs and help wanted.

Also it seems like theres a lot of movement around rn-nodeify, a nifty hack rewriting files locally in order to get around fixing the react native packager. Ive favored this solution in the readmes for now while I continue to work on my solution

[jacobrosenthal]

Todo: Look at https://reactnatve.wordpress.com/2016/06/16/alias-in-react-native/

[jacobrosenthal]

"The React Native Packager has a built-in option, extraNodeModules, which seems to act as a module alias mapping. I couldn't find much information about this option, but here's the PR where it was added: facebookarchive/node-haste#69. Here's my rn-cli.config.js:"
philikon/ReactNativify#4

[jacobrosenthal]

Another day another set of options. I found https://github.com/tleunen/babel-plugin-module-resolver which should allow something like

{
	'presets': ['module:metro-react-native-babel-preset'],
  	'plugins': [
    ['module-resolver', {
	    'extensions': ['.ios.js', '.android.js', '.js', '.json'],
	    'alias': {
	      'noble': 'react-native-ble'
	    }
    }]
  ]
}

However in practice it also recursively rewrites react-native-ble itself so the noble/with-bindings becomes react-native-ble/with-bindings ...
It doesnt have an includes or excludes like say webpack tleunen/babel-plugin-module-resolver#301
but the regex or function
https://github.com/tleunen/babel-plugin-module-resolver/blob/master/DOCS.md#regular-expressions or
https://github.com/tleunen/babel-plugin-module-resolver/blob/master/DOCS.md#passing-a-substitute-function might be able to be hacked somehow?

Otherwise @phated has a concept for using the metro field in package.json here

  "metro": {
    "resolver": {
      "resolverMainFields": [
        "react-native",
        "browser",
        "main"
      ]
    }
  }

Then pushing these bindings directly inside of noble and then adding to nobles package.json

  "react-native": {
    "./lib/resolve-bindings.js": "./lib/resolve-bindings"
  },

which could swap in resolve-bindings.ios.js or resolve-bindings.android.js if we move all this code upstream. Though noble needs cross platform code changes swapping events/ and inherits instead of util and events

[jacobrosenthal]

Oh odd.. you actually dont need any of the metro/react-native key stuff in either project, itll automatically pick up the bindings because noble doesnt specify an extension here
https://github.com/noble/noble/blob/c4cd18a7a429bb832f6c4ca793be3faf9af884e9/index.js#L2