Problem Running on Device

[RyGuyM]

Is anybody else having trouble running on device? I bundle my code and switch my AppDelegate and everything looks alright but it doesn't work. The React Native packager starts up when I hit build in xCode and it tries to pull my files from the development server.

Any ideas? I'm at a loss. Currently running RN 0.14.2

[jordaaash]

+1

Everything works running against the server with rwns start. rwns bundle finishes without issue. When launching the project from Xcode with

jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

the React Native packager starts, and I get errors in the console:

2015-11-19 04:49:52.168 [error][tid:com.facebook.React.JavaScript] 'Error: \n stack: requireImpl@file:///Users/jordan/Library/Developer/CoreSimulator/Devices/AC86D9C5-C646-4E26-9392-F898E1470BE7/data/Containers/Bundle/Application/C27CC491-0508-47AC-A964-31D7AF22ECAA/Stylisted.app/main.jsbundle:48:16\nrequire@file:///Users/jordan/Library/Developer/CoreSimulator/Devices/AC86D9C5-C646-4E26-9392-F898E1470BE7/data/Containers/Bundle/Application/C27CC491-0508-47AC-A964-31D7AF22ECAA/Stylisted.app/main.jsbundle:26:19\neval code\neval@[native code]\nfile:///Users/jordan/Library/Developer/CoreSimulator/Devices/AC86D9C5-C646-4E26-9392-F898E1470BE7/data/Containers/Bundle/Application/C27CC491-0508-47AC-A964-31D7AF22ECAA/Stylisted.app/main.jsbundle:915:5\n__webpack_require__@file:///Users/jordan/Library/Developer/CoreSimulator/Devices/AC86D9C5-C646-4E26-9392-F898E1470BE7/data/Containers/Bundle/Application/C27CC491-0508-47AC-A964-31D7AF22ECAA/Stylisted.app/main.jsbundle:882:23\neval code\neval@[native code]\nfile:///Users/jordan/Library/Developer/CoreSimulator/Devices/AC86D9C5-C646-4E26-9392-F898E1470BE7/data/Containers/Bundle/Application/C27CC491-0508-47AC-A964-31D7AF22ECAA/Stylisted.app/main.jsbundle:909:5\n__webpack_require__@file:///Users/jordan/Library/Developer/CoreSimulator/Devices/AC86D9C5-C646-4E26-9392-F898E1470BE7/data/Containers/Bundle/Application/C27CC491-0508-47AC-A964-31D7AF22ECAA/Stylisted.app/main.jsbundle:882:23\nfile:///Users/jordan/Library/Developer/CoreSimulator/Devices/AC86D9C5-C646-4E26-9392-F898E1470BE7/data/Containers/Bundle/Application/C27CC491-0508-47AC-A964-31D7AF22ECAA/Stylisted.app/main.jsbundle:902:27\nfile:///Users/jordan/Library/Developer/CoreSimulator/Devices/AC86D9C5-C646-4E26-9392-F898E1470BE7/data/Containers/Bundle/Application/C27CC491-0508-47AC-A964-31D7AF22ECAA/Stylisted.app/main.jsbundle:902:33\nrequireImpl@file:///Users/jordan/Library/Developer/CoreSimulator/Devices/AC86D9C5-C646-4E26-9392-F898E1470BE7/data/Containers/Bundle/Application/C27CC491-0508-47AC-A964-31D7AF22ECAA/Stylisted.app/main.jsbundle:64:17\nrequireImpl@file:///Users/jordan/Library/Developer/CoreSimulator/Devices/AC86D9C5-C646-4E26-9392-F898E1470BE7/data/Containers/Bundle/Application/C27CC491-0508-47AC-A964-31D7AF22ECAA/Stylisted.app/main.jsbundle:34:32\nrequire@file:///Users/jordan/Library/Developer/CoreSimulator/Devices/AC86D9C5-C646-4E26-9392-F898E1470BE7/data/Containers/Bundle/Application/C27CC491-0508-47AC-A964-31D7AF22ECAA/Stylisted.app/main.jsbundle:26:19\nglobal code@file:///Users/jordan/Library/Developer/CoreSimulator/Devices/AC86D9C5-C646-4E26-9392-F898E1470BE7/data/Containers/Bundle/Application/C27CC491-0508-47AC-A964-31D7AF22ECAA/Stylisted.app/main.jsbundle:935:9\n line: 48\n message: Requiring unknown module "babel-runtime/helpers/interop-require-default". If you are sure the module is there, try restarting the packager.', { [Error: Requiring unknown module "babel-runtime/helpers/interop-require-default". If you are sure the module is there, try restarting the packager.]
  line: 48,
  column: 16,
  sourceURL: 'file:///Users/jordan/Library/Developer/CoreSimulator/Devices/AC86D9C5-C646-4E26-9392-F898E1470BE7/data/Containers/Bundle/Application/C27CC491-0508-47AC-A964-31D7AF22ECAA/Stylisted.app/main.jsbundle' }
2015-11-19 04:49:52.173 [error][tid:com.facebook.React.JavaScript] 'Error: \n stack: requireImpl@file:///Users/jordan/Library/Developer/CoreSimulator/Devices/AC86D9C5-C646-4E26-9392-F898E1470BE7/data/Containers/Bundle/Application/C27CC491-0508-47AC-A964-31D7AF22ECAA/Stylisted.app/main.jsbundle:48:16\nrequireImpl@file:///Users/jordan/Library/Developer/CoreSimulator/Devices/AC86D9C5-C646-4E26-9392-F898E1470BE7/data/Containers/Bundle/Application/C27CC491-0508-47AC-A964-31D7AF22ECAA/Stylisted.app/main.jsbundle:34:32\nrequire@file:///Users/jordan/Library/Developer/CoreSimulator/Devices/AC86D9C5-C646-4E26-9392-F898E1470BE7/data/Containers/Bundle/Application/C27CC491-0508-47AC-A964-31D7AF22ECAA/Stylisted.app/main.jsbundle:26:19\n line: 48\n message: Requiring unknown module "BatchedBridge". If you are sure the module is there, try restarting the packager.', { [Error: Requiring unknown module "BatchedBridge". If you are sure the module is there, try restarting the packager.]

[jordaaash]

Hmm, may have been a different issue. I'm using synx to organize files, and this led to the main.jsbundle file ending up a directory not recognized by Xcode. Once I dragged the file in, the bundled build worked fine (on the simulator). I'll try it on the actual device this week and report back.

[jrm2k6]

Are you guys able to run your app in a simulator with RN 0.14.2 and the latest version of RNWS?

[jordaaash]

Yes, but not the npm version -- I'm running d3219b24061200dad70b5c0fe7b0ef606ceaa10f from Github.

[jrm2k6]

@jordansexton Well, I tried to clone the repo, and npm link to use the cloned repo locally as the module but it fails. Would you mind sharing your package.json and webpack.config.json just in case I messed up something?

[jordaaash]

package.json (pretty simple)

{
    "name":            "Stylisted",
    "version":         "2.0.0",
    "description":     "Stylisted's React Native app",
    "author":          "Stylisted <tech@stylisted.com>",
    "contributors":    [
        {
            "name":  "Jordan Sexton",
            "email": "jordan@stylisted.com"
        }
    ],
    "private":         true,
    "scripts":         {
        "start":              "rnws start",
        "bundle":             "rnws bundle",
        "hot":                "npm start -- --hot",
        "android-setup-port": "adb reverse tcp:8081 tcp:8080",
        "lint":               "eslint --ext .js --ext .jsx .",
        "refresh":            "npm prune && npm install && npm update",
        "webpack":            "webpack --progress --colors --display-reasons --display-error-details"
    },
    "engines":         {
        "node": "^4.x"
    },
    "devDependencies": {
        "babel-core":                   "5.8.32",
        "babel-eslint":                 "4.1.3",
        "babel-loader":                 "5.3.2",
        "babel-plugin-react-transform": "1.1.1",
        "babel-runtime":                "5.8.29",
        "eslint":                       "1.7.3",
        "eslint-loader":                "1.1.0",
        "eslint-plugin-react":          "3.6.3",
        "react":                        "0.14.2",
        "react-native":                 "0.14.2",
        "react-native-webpack-server":  "mjohnston/react-native-webpack-server#d3219b24061200dad70b5c0fe7b0ef606ceaa10f",
        "react-native-wkwebview":       "qrush/react-native-wkwebview#9f17653efd71e399e6daaf2c30566318a6436088",
        "react-transform-hmr":          "1.0.1",
        "webpack":                      "1.12.2",
        "webpack-dev-server":           "1.12.1"
    }
}

webpack.config.js (somewhat customized, not derived from the BabelES6 Example)

'use strict';

require('./env');

console.log('webpack: ' + process.env.NODE_ENV);

var path    = require('path');
var webpack = require('webpack');

var root                 = __dirname;
var applicationDirectory = path.join(root, 'application');

var definitions = [
    'BUNDLE_URI',
    'NODE_ENV'
].reduce(function (definitions, key) {
    var value = process.env[key];
    if (value != null) {
        definitions['process.env.' + key] = JSON.stringify(value);
    }
    return definitions;
}, {});

var include = [
    applicationDirectory,
    path.join(root, 'node_modules', 'react-native-wkwebview')
];

var transforms = [
    'es6.blockScoping',
    'es6.classes',
    'es6.destructuring',
    'es6.modules',
    'es6.properties.shorthand',
    'es7.objectRestSpread',
    'runtime',
    'react',
    'react.displayName'
];

var config = function (platforms) {
    var entry, config;

    entry = platforms.reduce(function (entry, platform) {
        entry['index.' + platform] = path.join(applicationDirectory, platform, 'index.jsx');
        return entry;
    }, {});

    config = {
        verbose: true,
        colors:  true,
        cache:   {},
        debug:   true,
        entry:   entry,
        output:  {
            path:     root,
            filename: '[name].js'
        },
        eslint:  { configFile: path.join(root, '.eslintrc') },
        module:  {
            preLoaders: [{
                loader:  'eslint',
                include: [applicationDirectory],
                test:    /\.jsx?$/
            }],
            loaders:    [{
                test:    /\.jsx?$/,
                loader:  'babel',
                include: include,
                query:   {
                    stage:     1,
                    whitelist: transforms
                }
            }]
        },
        plugins: [
            new webpack.DefinePlugin(definitions),
            new webpack.optimize.OccurenceOrderPlugin,
            new webpack.optimize.LimitChunkCountPlugin({ maxChunks: Object.keys(entry).length }),
            new webpack.optimize.DedupePlugin
        ],
        resolve: {
            extensions: ['', '.js', '.jsx']
        }
    };

    if (process.env.NODE_ENV === 'development') {
        config.plugins.push(new webpack.SourceMapDevToolPlugin(
            '[file].map', null, '[absolute-resource-path]', '[absolute-resource-path]'
        ));
    }

    return config;
};

module.exports = config(['ios', 'android']);

[jrm2k6]

That's interesting, it still fails for me even with the latest commit. My webpack.config.js is the same one as the one in the Babel example.

[jordaaash]

I was able to run the BabelES6 example without alteration.

[jrm2k6]

Thanks. I will see if I can run the example because it might be a minor issue. Sorry for hijacking your thread.

[jordaaash]

In fairness, I probably jacked it from @RyGuyM...

[jrm2k6]

So I am able to run the example. With the same package.json and same webpack config as in the BabelEs6 example, but on a new project it fails.

This is insane.

[RyGuyM]

Sorry guys for not contributing. It's been a busy past couple days switching back to using just the RN packager. I more than happy to donate my thread. I had some problems with websockets and FileReader that were tricky to find when running on the device. I did manage to have some luck running 0.15.0-rc on device with a webpack and package.json config very similar to the BabelEs6 example.

[elliottsj]

Hey guys, sorry for the lack of support. This project is now looking for a maintainer; see #143

[jordaaash]

Maybe we can mark this as closed. It seems like it's possible to get it running based on the working BabelES6 example. My own issue was an error with my code that I resolved by using the example as well.