resolve.alias

[jacobrosenthal]

Im using a resolve.alias to swap node module noble for my react native shim react-native-ble

from my webpack.config.js:

  resolve: {
    extensions: ['', '.js', '.jsx', '.es6', '.json'],
    alias: {
      noble: 'react-native-ble'
    }
  },

And here is my index.ios.js:

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  View
} = React;

var noble = require('noble');
console.log(noble);

var bleqr = React.createClass({

  render: function() {
    return (
      <View></View>
    );
  }
});

AppRegistry.registerComponent('bleqr', () => bleqr);

I get a few failures messages, and then the code runs clearly having utilize the alias, though the app then crashes:

2015-09-19 23:08:13.037 [error][tid:com.facebook.React.JavaScript] 'Error: Requiring unknown module "noble". If you are sure the module is there, try restarting the packager.\n stack: \n  <unknown>  index.ios.bundle:1407\n  require    index.ios.bundle:254\n  require    index.ios.bundle:200\n  <unknown>  index.ios.bundle:51855\n URL: http://172.20.10.3:8080/index.ios.bundle\n line: 213\n message: Requiring unknown module "noble". If you are sure the module is there, try restarting the packager.'
2015-09-19 23:08:13.067 [info][tid:com.facebook.React.JavaScript] { state: 'unknown',
  _bindings: 
   { _peripherals: {},
     startScanning: [Function],
     stopScanning: [Function],
     connect: [Function],
     disconnect: [Function],
     updateRssi: [Function],
     discoverServices: [Function],
     discoverIncludedServices: [Function],
     discoverCharacteristics: [Function],
     read: [Function],
     write: [Function],
     broadcast: [Function],
     notify: [Function],
     discoverDescriptors: [Function],
     readValue: [Function],
     writeValue: [Function],
     readHandle: [Function],
     writeHandle: [Function],
     _events: 
      { stateChange: [Function],
        scanStart: [Function],
        scanStop: [Function],
        discover: [Function] } },
  _peripherals: {},
  _services: {},
  _characteristics: {},
  _descriptors: {} }
2015-09-19 23:08:13.347 [info][tid:com.facebook.React.JavaScript] 'Running application "bleqr" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF'
2015-09-19 23:08:13.388 [warn][tid:com.facebook.React.JavaScript] 'devtools socket errored', [Error: The operation couldn’t be completed. Connection refused]

Any thoughts?

[jacobrosenthal]

I thought maybe it was some native ios code issue, but I tried with the far simpler case of pure js code which also 'works' but crashes. I presume alias's just havent been looked into yet?

pumpkins.js

module.exports = function() {
  console.log('pumpkins');
}

webpack.config.js snippet

    alias: {
      pumpkins: './pumpkins.js'
    }

index.ios.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
var {
  AppRegistry,
  View
} = React;

var pumpkins = require('pumpkins');
console.log(pumpkins);
pumpkins();

var bleqr = React.createClass({

  render: function() {
    return (
      <View></View>
    );
  }
});

AppRegistry.registerComponent('bleqr', () => bleqr);

output

2015-09-21 14:19:56.800 [error][tid:com.facebook.React.JavaScript] 'Error: Requiring unknown module "pumpkins". If you are sure the module is there, try restarting the packager.\n stack: \n  <unknown>  index.ios.bundle:1407\n  require    index.ios.bundle:254\n  require    index.ios.bundle:200\n  <unknown>  index.ios.bundle:51856\n URL: http://172.20.10.3:8080/index.ios.bundle\n line: 213\n message: Requiring unknown module "pumpkins". If you are sure the module is there, try restarting the packager.'
2015-09-21 14:19:56.807 [info][tid:com.facebook.React.JavaScript] [Function]
2015-09-21 14:19:56.808 [info][tid:com.facebook.React.JavaScript] 'pumpkins'
2015-09-21 14:19:57.006 [info][tid:com.facebook.React.JavaScript] 'Running application "bleqr" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF'
2015-09-21 14:19:57.048 [warn][tid:com.facebook.React.JavaScript] 'devtools socket errored', [Error: The operation couldn’t be completed. Connection refused]

[elliottsj]

I wasn't able to reproduce your issue. resolve.alias seems to work fine for the BabelES6 example: https://github.com/elliottsj/react-native-webpack-server/commit/85758291633828b1e68d576f89eb2dc6a744902d

[jacobrosenthal]

I agree, everything works when I take the BabelES6 as my template. However when I use react-native init AwesomeProject to create a template and apply the readme resolve doesnt work..

[elliottsj]

Closed via https://github.com/jacobrosenthal/react-native-ble/issues/2#issuecomment-144686037