mjohnston / react-native-webpack-server Goto Github PK

View Code? Open in Web Editor NEW

933.0 933.0 85.0 405 KB

Build React Native apps with Webpack

License: MIT License

JavaScript 100.00%

react-native-webpack-server's People

Contributors

Stargazers

Watchers

react-native-webpack-server's Issues

Have a `bundle` command

It would be great to have a bundle command that would leverage webpack + react-native bundle + all the magic being done here to get the final bundle suitable for release.

package.json not found in any of the roots

When trying to set up environment similar to BabelES6 example, I'm getting the follow error when running npm run start:

Error: File /Users/burg/git/home/node_modules/react-native-webpack-server/package.json not found in any of the roots
    at Fastfs._getAndAssertRoot (/Users/burg/git/home/node_modules/react-native/packager/react-packager/src/DependencyResolver/fastfs.js:137:13)
    at Fastfs._add (/Users/burg/git/home/node_modules/react-native/packager/react-packager/src/DependencyResolver/fastfs.js:152:10)
    at /Users/burg/git/home/node_modules/react-native/packager/react-packager/src/DependencyResolver/fastfs.js:38:18
    at Array.forEach (native)
    at /Users/burg/git/home/node_modules/react-native/packager/react-packager/src/DependencyResolver/fastfs.js:31:13
    at tryCallOne (/Users/burg/git/home/node_modules/react-native/node_modules/promise/lib/core.js:37:12)
    at /Users/burg/git/home/node_modules/react-native/node_modules/promise/lib/core.js:103:15
    at flush (/Users/burg/git/home/node_modules/react-native/node_modules/promise/node_modules/asap/raw.js:50:29)
    at doNTCallback0 (node.js:408:9)
    at process._tickCallback (node.js:337:13)

Here is my package.json:

{
  "name": "home",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "__commented__original_start": "node_modules/react-native/packager/packager.sh",
    "start": "node node_modules/react-native-webpack-server/bin/react-native-webpack-server.js start",
    "hot": "HOT=1 node node_modules/react-native-webpack-server/bin/react-native-webpack-server start --hot"
  },
  "dependencies": {
    "react": "^0.13.3",
    "react-native": "^0.7.1"
  },
  "devDependencies": {
    "babel": "^5.8.3",
    "babel-core": "^5.8.3",
    "babel-loader": "^5.3.2",
    "react-hot-loader": "^1.2.8",
    "react-native-webpack-server": "^0.2.2",
    "webpack": "^1.10.5",
    "webpack-dev-server": "^1.10.1"
  }
}

My webpack.config.js

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

var config = {

    debug: true,

    devtool: 'source-map',

    entry: {
        'index.ios': ['./src/main.js'],
    },

    output: {
        path: path.resolve(__dirname, 'build'),
        filename: '[name].js',
    },

    module: {
        loaders: [
            {test: /\.js$/, exclude: /node_modules/, loaders: ['babel?stage=0&blacklist=validation.react']},
        ],
    },

    plugins: [],

};

// Hot loader
if (process.env.HOT) {
    config.devtool = 'eval'; // Speed up incremental builds
    config.entry['index.ios'].unshift('./node_modules/react-native-webpack-server/hot/entry');
    config.entry['index.ios'].unshift('webpack/hot/only-dev-server');
    config.entry['index.ios'].unshift('webpack-dev-server/client?http://localhost:8082');
    config.output.publicPath = 'http://localhost:8082/';
    config.module.loaders[0].loaders.unshift('react-hot');
    config.plugins.unshift(new webpack.HotModuleReplacementPlugin());
}

// Production config
if (process.env.NODE_ENV === 'production') {
    config.plugins.push(new webpack.optimize.OccurrenceOrderPlugin());
    config.plugins.push(new webpack.optimize.UglifyJsPlugin());
}

module.exports = config;

Entry for production

My webpack.config covers webpacking for development, but not yet for production.

It'd be nice to have a plugin or pre-entry pack that includes the React native containers.

EDIT:

To explain further, we can build a packaged jsbundle with curl, but would be nice to be able to build it without running the server.

With CURL:

The application is available on http://localhost:8080/index.ios.bundle, but when building on the packager port http://localhost:8081/index.ios.bundle with curl, the application is not bundled with the rest of the React core. Is this intended?

Hot loading fails to reload

After a bit of mucking, I finally got RHL working to the extent that it doesn't blow up, however the hot loader doesn't reload the view in-app. On the first source change, I see the following error:

[HMR] Update check failed: Error: Manifest request to http://localhost:8082/08705b544a5affd23d86.hot-update.json timed out.
    at request.onreadystatechange (http://10.0.1.35:8080/index.ios.bundle:41405:23)
    at XMLHttpRequestBase.$XMLHttpRequestBase_setReadyState (http://10.0.1.35:8080/index.ios.bundle:11371:7)
    at XMLHttpRequestBase.callback (http://10.0.1.35:8080/index.ios.bundle:11360:10)
    at XMLHttpRequest.<anonymous> (http://10.0.1.35:8080/index.ios.bundle:11127:14)
    at MessageQueueMixin._invokeCallback (http://10.0.1.35:8080/index.ios.bundle:7582:10)
    at http://10.0.1.35:8080/index.ios.bundle:7645:34
    at Array.forEach (native)
    at http://10.0.1.35:8080/index.ios.bundle:7637:15
    at ReactDefaultBatchingStrategyTransaction.Mixin.perform (http://10.0.1.35:8080/index.ios.bundle:6151:20)
    at Object.ReactDefaultBatchingStrategy.batchedUpdates (http://10.0.1.35:8080/index.ios.bundle:13995:19)
$HOME/app/node_modules/webpack-dev-server/client/index.js?

I hope to support Android in react native

Add 0.9.0-rc support

I think that there is no need to code changes, just add composer.json support for react-native 0.9.0-rc

This is very important because since 0.9.0 rc TextInput is finally a true controlled component.

Thanks again for your work!

Error: File /Users/mtford/Playground/CodenameBig/node_modules/react-native-webpack-server/node_modules/connect/node_modules/finalhandler/node_modules/on-finished/node_modules/ee-first/index.js not found in any of the roots

Hi,

Having issues getting this up and running - I copied from the babel example.

I get a red screen in the app and the following error in the terminal when running in the simulator:

Error: File /Users/mtford/Playground/CodenameBig/node_modules/react-native-webpack-server/node_modules/connect/node_modules/finalhandler/node_modules/on-finished/node_modules/ee-first/index.js not found in any of the roots
    at Fastfs._getAndAssertRoot (/Users/mtford/Playground/CodenameBig/node_modules/react-native/packager/react-packager/src/DependencyResolver/fastfs.js:137:13)
    at Fastfs._add (/Users/mtford/Playground/CodenameBig/node_modules/react-native/packager/react-packager/src/DependencyResolver/fastfs.js:152:10)
    at /Users/mtford/Playground/CodenameBig/node_modules/react-native/packager/react-packager/src/DependencyResolver/fastfs.js:38:18
    at Array.forEach (native)
    at /Users/mtford/Playground/CodenameBig/node_modules/react-native/packager/react-packager/src/DependencyResolver/fastfs.js:31:13
    at tryCallOne (/Users/mtford/Playground/CodenameBig/node_modules/react-native/node_modules/promise/lib/core.js:37:12)
    at /Users/mtford/Playground/CodenameBig/node_modules/react-native/node_modules/promise/lib/core.js:103:15
    at flush (/Users/mtford/Playground/CodenameBig/node_modules/react-native/node_modules/promise/node_modules/asap/raw.js:50:29)
    at process._tickCallback (node.js:442:13)
{"type":"InternalError","message":"react-packager has encountered an internal error, please check your terminal error output for more details"}

The project is available at https://github.com/mtford90/codename-big if you wanna take a look at the setup.

Any help would be much appreciated!

CPU goes to +200%

Everytime I run npm start script, take some seconds for the fans to start moving. Activity monitor shows a cpu use of +200%. Is this normal at this moment of the project?

`this.packageServer.kill();` won't kill the process of 'packager.js'

So the port 8081 still be opened after killing the packageServer. You may use 'pkill -P pid' to instead of childProcess.kill().

Loading 3rd party libs causes errors

ERROR in ./~/react-native-keyboardevents/KeyboardEvents.ios.js
Module parse failed: /node_modules/react-native-keyboardevents/KeyboardEvents.ios.js Line 15: Unexpected token =>
You may need an appropriate loader to handle this file type.
|   'WillChangeFrame',
|   'DidChangeFrame',
| ].map((event) => 'Keyboard' + event);
| 
| events.forEach((eventKey) => {
 @ ./src/client/components/trackKeyboard.react.js 9:33-71

And so on... the only solution is to pass this package via babel.

.babelrc changes are not picked up unless you clear packager cache

I don't know enough about Packager but I just found out the hard way that adding .babelrc and later changing it has zero effect unless you also delete some temp directories.

This comment explains what to do: facebook/react-native#1924 (comment)

I'm not sure whether we should

do this from code
wait for RN to do this
warn about it in README

but I for sure know I spent three hours on this.

:-)

React Dev Tools don't work when hot is enabled

React Dev Tools show no components when hot loading is enabled, but run fine without hot loading.

Hot loading not working.

I followed the documentation to get react-hot-loader working in my app.

It seems that it doesn't do anything though. I keep changing one of my component and the changes are not applied until I manually refresh from the emulator.

./node_modules/.bin/react-native-webpack-server start --hot=1

"dependencies": {
    "babel": "^5.8.23",
    "babel-loader": "^5.3.2",
    "lodash": "^3.10.1",
    "react-native": "^0.11.0-rc",
    "react-native-button": "^1.2.1",
    "react-redux": "^2.1.0",
    "redux": "^2.0.0",
    "redux-thunk": "^0.1.0",
    "superagent": "^1.3.0",
    "webpack-dev-server": "^1.10.1"
  },
  "devDependencies": {
    "react-hot-loader": "^1.3.0",
    "react-native-webpack-server": "^0.4.0-rc",
    "webpack": "^1.12.1",
    "webpack-dev-server": "^1.10.1"
  }

webpack.config.js

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

var config = {

  debug: true,

  devtool: 'source-map',

  entry: {
    'index.ios': ['./src/app.js'],
  },

  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js',
  },

  module: {
    loaders: [
      {test: /\.js$/,
        loaders: ['babel?stage=0&blacklist=validation.react']},
    ],
  },

  plugins: [],

};

// Hot loader
if (process.env.HOT) {
  config.devtool = 'eval'; // Speed up incremental builds
  config.entry['index.ios'].unshift('./node_modules/react-native-webpack-server/hot/entry');
  config.entry['index.ios'].unshift('webpack/hot/only-dev-server');
  config.entry['index.ios'].unshift('webpack-dev-server/client?http://localhost:8082');
  config.output.publicPath = 'http://localhost:8082/';
  config.module.loaders[0].loaders.unshift('react-hot');
  config.plugins.unshift(new webpack.HotModuleReplacementPlugin());
}

// Production config
if (process.env.NODE_ENV === 'production') {
  config.plugins.push(new webpack.optimize.OccurrenceOrderPlugin());
  config.plugins.push(new webpack.optimize.UglifyJsPlugin());
}

module.exports = config;

Live Reload enabled in the emulator.

Any idea where I should look now? Sorry if it is not the right place to ask.

undefined is not an object (evaluating 'navigator.userAgent.match') running examples

Here's what I got when running Babel example with hot loader enabled:

This seems to be coming from

/**
 * Check if we are running an android browser. That requires us to use
 * ArrayBuffer with polling transports...
 *
 * http://ghinda.net/jpeg-blob-ajax-android/
 */

var isAndroid = navigator.userAgent.match(/Android/i);

in engine.io-parser used by socket.io.

Ideas?

Change to make it work in RN 0.9.0

I was running into an error when trying the latest version with RN 0.9.0 saying that "React" is not defined, and I was able to track the error down to this file/line:

react-native-webpack-server/lib/getReactNativeExternals.js

Line 41 in 4aa6f63

externals['react-native'] = 'React';

It seems that at least in RN 0.9.0, the React variable is no longer defined in the global scope.

By changing it to the following, everything started working without errors, and hot reload was working again perfectly:

externals['react-native'] = "require('react-native/Libraries/react-native/react-native.js')";

I'm not sure this is the correct fix, but posting it here if anyone more familiarized with the internals of the RN packager + the internals of RN webpack server can work the correct solution out from this.

If this happens to be the correct solution, I'm happy to send this as a PR though.

Building example with npm 3.3.4 failed

When I'm trying to build BabelES6 example, I'm getting these errors:

Unable to resolve module LinkedStateMixin from /Users/alexanderkuznetsov/git/reef/node_modules/react-native/Libraries/react-native/react-native.js
Unable to resolve module ReactComponentWithPureRenderMixin from /Users/alexanderkuznetsov/git/reef/node_modules/react-native/Libraries/react-native/react-native.js
...

If I get it right, it happens because all dependencies are now in root node_modules dir, and ReactPackager cannot find react-native dependencies.

I tried to (dirty) fix it like that:

function getReactNativeExternals() {
  var reactNativeRoot = path.dirname(require.resolve('react-native/package'));
  var blacklist = require('react-native/packager/blacklist');
  var ReactPackager = require('react-native/packager/react-packager');
  var reactNativePackage = require('react-native/package');

  var projectRoots = [reactNativeRoot].concat([
    'react-tools',
    'promise',
    'stacktrace-parser',
    'react-timer-mixin',
    'rebound',
    'immutable'
  ].map(function(name) { return path.dirname(require.resolve(name + '/package.json')); }))

  return ReactPackager.getDependencies({
    assetRoots: [reactNativeRoot],
    blacklistRE: blacklist(false /* don't blacklist any platform */),
    projectRoots: projectRoots,
 ...

It helps with build errors, but there are errors in server still:

...
[12:46:03] <END>   Building Dependency Graph (1773ms)
Unable to resolve module react-native from /Users/alexanderkuznetsov/git/reef/node_modules/react-native-webpack-server/_entry/index.ios.js
transforming [========================================] 100% 9/9
[12:46:10] <START> request:/index.ios.bundle
...

global var window consistency

this is a webpack config issue it seems, due to its defaulting to "target: web". However changing to "target: node" results in other problems so...

Symptom: "window" as a global exists whether or not DevTools is open and debugging, however it has different properties. For example, with DevTools open, it has "crypto", but with DevTools closed, it does not. This obviously makes for inconsistent (if amusing) app behavior.

In my particular case, I'm using the brorand, an rng wrapper that checks for a global "window" var to decide which crypto implementation to use. The result is that if I have DevTools open, it successfully uses window.crypto.getRandomValues, but when it's closed, it sees "window", thinks it's in the browser, but doesn't see window.crypto and gives up with a "Not implemented" error.

(with the regular react-native packager, there is no window global var)

image! require error

Firstly thank you for this, it's great!

The only problem I've had is requiring images via Image.xcassets. Is there currently a way to handle this?

Add support for non-builtin RN packages

We need to tell the RN packager about modules that aren't part of the standard build when you require('react-native') e.g. AdSupportIOS.

A couple ways I can think of:

Specify a list of non-builtins that your app requires to the Server
Build the RN packager's entry.js based on the RN externals required by the application code

Requiring react-native modules inside node_modules fails

Error: Invalid path ''

After the packager starts I get this error

React packager ready.

|
Error: Invalid path ''
    at pathToArray (/Users/amccloud/.Labs/Nom/node_modules/webpack-dev-server/node_modules/webpack-dev-middleware/node_modules/memory-fs/lib/MemoryFileSystem.js:23:38)
    at MemoryFileSystem.mkdirpSync (/Users/amccloud/.Labs/Nom/node_modules/webpack-dev-server/node_modules/webpack-dev-middleware/node_modules/memory-fs/lib/MemoryFileSystem.js:107:13)
    at MemoryFileSystem.(anonymous function) [as mkdirp] (/Users/amccloud/.Labs/Nom/node_modules/webpack-dev-server/node_modules/webpack-dev-middleware/node_modules/memory-fs/lib/MemoryFileSystem.js:187:34)
    at Tapable.<anonymous> (/Users/amccloud/.Labs/Nom/node_modules/webpack/lib/Compiler.js:219:25)
    at Tapable.applyPluginsAsync (/Users/amccloud/.Labs/Nom/node_modules/webpack/node_modules/tapable/lib/Tapable.js:60:69)
    at Tapable.Compiler.emitAssets (/Users/amccloud/.Labs/Nom/node_modules/webpack/lib/Compiler.js:216:7)
    at Watching.<anonymous> (/Users/amccloud/.Labs/Nom/node_modules/webpack/lib/Compiler.js:45:18)
    at /Users/amccloud/.Labs/Nom/node_modules/webpack/lib/Compiler.js:392:12
    at Tapable.next (/Users/amccloud/.Labs/Nom/node_modules/webpack/node_modules/tapable/lib/Tapable.js:67:11)
    at Tapable.<anonymous> (/Users/amccloud/.Labs/Nom/node_modules/webpack/lib/CachePlugin.js:40:4)
    at Tapable.applyPluginsAsync (/Users/amccloud/.Labs/Nom/node_modules/webpack/node_modules/tapable/lib/Tapable.js:71:13)
    at Tapable.<anonymous> (/Users/amccloud/.Labs/Nom/node_modules/webpack/lib/Compiler.js:389:9)
    at Tapable.<anonymous> (/Users/amccloud/.Labs/Nom/node_modules/webpack/lib/Compilation.js:549:13)
    at Tapable.applyPluginsAsync (/Users/amccloud/.Labs/Nom/node_modules/webpack/node_modules/tapable/lib/Tapable.js:60:69)
    at Tapable.<anonymous> (/Users/amccloud/.Labs/Nom/node_modules/webpack/lib/Compilation.js:544:10)
    at Tapable.applyPluginsAsync (/Users/amccloud/.Labs/Nom/node_modules/webpack/node_modules/tapable/lib/Tapable.js:60:69)

Cannot Resolve Module 'React'

file:
import connectToStores from 'alt/utils/connectToStores'

terminal:

ERROR in ./~/alt/utils/connectToStores.js
Module not found: Error: Cannot resolve module 'react' in /sites/node_modules/alt/utils
 @ ./~/alt/utils/connectToStores.js 56:13-29

webpack:

  resolve: {
    extensions: ['', '.js'],
    root: [
      path.join(__dirname, './node_modules'),
      path.join(__dirname, './src'),
    ]
  },```

react-native 0.11.0-rc
react-native-webpack-server 0.40.-rc
webpack 1.10.1
alt 0.17.1

Android file...?

How does one override the default file for Android and have it load the result of the webserver? I've been looking at the source code and can't find an override like in iOS. Any ideas?

Pulled down Examples, ran Babel example, no hot loading or live reload

Hey there,

I've had no luck getting this to work.

I configured my own project to use the same set up as the babel example, and while i got it compiling fine, it was only with manual refresh. I set up "hot", tried live reload, nothing worked.

I tried pulling down your example and running that as well. Also got it running, but no hot loading was happening. I am pretty sure I followed your instructions to a T, and I am using a typical stock mac set up...I run a lot of node projects already, so weird dependency problems seem unlikely.

Feel free to close this, since I know this isn't a ton of detail, just wanted you to know

Update hot/entry.js for React 0.4.4

They've renamed a few things:

All that needs to happen is ReactIOSMount -> ReactNativeMount in the hot/entry.js file.

resolve.alias

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?

Use ReactPackager to build externals

Currently, the react-native externals are built by crawling the filesystem. This has caused a number of bugs since react-native's module format is filesystem-independent.

A better solution is to ask the ReactPackager for it's dependency graph. See: https://github.com/facebook/react-native/tree/master/packager#reactpackagergetdependenciesoptions-main

Quick Question: Why Webpack and Hot Loader and not just built in react-native live reload?

I'm just curious what your option on this is? I am very used to using Webpack and Hot Loading in the browser, so I assumed I needed it for react-native. But now I have discovered that the vanilla React-Native starter includes a live reload feature. Is there something different about these approaches?

Clarify that npm install at the root is needed to run example app

It's a bit misleading to instruct to run

npm install
npm start

in example folders because you also need to run npm install on the root.

Otherwise you'll get something like

> [email protected] start /Users/dan/Documents/Projects/react-native-webpack-server/Examples/BabelES6
> node ../../bin/react-native-webpack-server start

module.js:322
    throw err;
          ^
Error: Cannot find module 'nomnom'

BabelES6 example fails with 'RCTRootView.h not found'

Using from a remote simulator

For rnplay.org, we have a simulator running inline from appetize.io: https://rnplay.org/plays/yQ2fnQ

Would it be possible to use this server from appetize (or a device) when running the webpack server on a remote host?

“An SSL error has occurred” on Xcode 7 beta

I'm not sure “whose” issue this really is but I'll leave this here for posterity. Someone might google this problem and come to this issue.

After trying to run an existing project on Xcode 7 beta on El Capitan Beta 2, I got this error:

Could not connect to development server. Ensure node server is running <...>

An SSL error has occurred and a secure connection to the server cannot be made.

In the console, I got this:

CFNetwork SSLHandshake failed (-9806)
NSURLSession/NSURLConnection HTTP load failed (kCFStreamErrorDomainSSL, -9806)

A post in this thread offered a workaround that I used:

Open Info.plist
Add these lines to it:

<key>NSAppTransportSecurity</key>  
<dict>  
<key>NSAllowsArbitraryLoads</key>  
<true/>  
</dict>

This is probably a temporary workaround but it was good enough for me.
Please close if this is irrelevant to this repo.

Create new Server with webpack config object instead of path

Thank you very much for creating this, it's very useful!

However, I use a highly customized webpack project setup and it would be great to be able to pass a webpack config object instead of the webpack.config.js-path to lib/Server.js.
What do you think?

Use React Transform instead of React Hot Loader

React Transform is a Babel plugin for applying runtime transformations to React classes. Combined with react-transform-webpack-hmr, it replaces React Hot Loader completely.

Benefits:

No need to work around dependency on react/lib/ReactMount
Does not depend on react package: you can give it react-native in configuration just fine
Better works with ES6 features like getters, and is much more stable
Allows other transformations, e.g. react-transform-catch-errors

SourceMaps don't work properly when hot loading using devtool: 'eval'

Source maps work perfectly when not using the hot loader...but when using the hot loader, two things happen:

index.ios.map is not served at http://localhost:8080/, as it is when hot loading is not enabled.
Gives right source location for my code, but not for React code (obviously related to number 1):
When you click on either my code or React Native code in the red screen of death in the simulator, it doesn't open the location in the editor as it does when hot loading is not enabled.

I haven't dove into your code yet to see why this might be happening, but I thought I'd post an issue here in case you had a quick fix.

Great project! So nice to be able to use webpack, esnext, etc. with React Native!

Incompatibility with React native 0.11.0

ERROR in ./~/react-native/Libraries/react-native/react-native.js Module not found: Error: Cannot resolve module 'ActivityIndicatorIOS' ..

Can't build the example projects with Xcode

I tried 0.2.0, but I'm getting this error with Xcode now:

This appears related to some changes in RN 0.4.4, but I have no idea what to do :-(

Starting the BabelES6 example with no modifications I get an error

Any ideas?

Module Build Failed. Did you mean "react"

Upgrading to latest webpack-server & 0.11.0-rc:

ERROR in ./~/react-native/Libraries/react-native/react-native.js
Module build failed: SyntaxError: /Users/peter/Sites/wayv_react_native/node_modules/react-native/Libraries/react-native/react-native.js: Line 20: Did you mean "react"?
  18 | //   var ReactNative = {...require('React'), /* additions */}
  19 | //
> 20 | var ReactNative = Object.assign(Object.create(require('React')), {

Dynamic loading of bundles based on URL

For the React Native Playground, we're using the standard packager, but would like to switch to this for hot reloading support.

Each app hosted there writes its javascript file to disk, and the ios app loads the corresponding bundle.

However, with webpack it looks like there's no way to specify an arbitrary entry point based on the URL. This issue looks related but unresolved: webpack/webpack#118

I'd love to know if you could suggest an alternative solution. Cheers!

Better Source Maps?

I read the README about source maps, but I'm a little confused. Is it possible to get clean source maps in the debugger when using Webpack dev server? Right now I am still seeing the transpiled Webpack code.

Cannot resolve module 'react/lib/ReactMount'

Hi,

Went I tried to execute the hot loader I received:

Cannot resolve module 'react/lib/ReactMount'

I use react-native 0.8.0 with issue #40 patch.

But something in the entry.js is not working.

if (module.hot) {
    var ReactNativeMount = require('ReactNativeMount');
  var HotLoaderInjection = require('react-hot-loader/Injection');
  HotLoaderInjection.RootInstanceProvider.injectProvider({
    getRootInstances: function() {
      return ReactNativeMount._instancesByContainerID;
    }
  });
  //! Terrible hack to marshall WS messages onto React Native's event loop.
  setInterval(function() {}, 200);
}

Anybody have te same issue? or any ideas?

Load images

Hey,
One question, I'm try to load an image. In the normal way as is it:

<Image 
    sytle = {style.image}
    source={require('image!./logo.jpg')}>
</Image>

But it is not working.
I try to use some loader :

{ test: /\.(jpe?g|png|gif)$/i, exclude: /node_modules/, loader: 'file-loader'}

{ test: /\.(jpe?g|png|gif)$/i, exclude: /node_modules/, loader: 'url-loader'}

But isn't work, Any ideas?

node core modules?

first of all, thanks for making this library!

This may be a naive question as I'm not that familiar with webpack, but how would you use node core modules (or rather their browserified versions)? I see node-libs-browser under webpack, but I'm not sure how to make webpack include them in the bundle. Adding something like...

var path = require('path')

...to App.js results in the red screen with:

Requiring unknown module "path".
If you are are sure the module is there, try restarting the packager.

If it helps, in the console where I ran the webpack server, I see:

           Asset     Size  Chunks             Chunk Names
    index.ios.js  18.1 kB       0  [emitted]  index.ios
index.ios.js.map  18.4 kB       0  [emitted]  index.ios
chunk    {0} index.ios.js, index.ios.js.map (index.ios) 15.6 kB [rendered]
    [0] multi index.ios 28 bytes {0}
    [1] ./src/main.js 468 bytes {0}
    [2] external "React" 42 bytes {0} [not cacheable]
    [3] ./src/components/App.js 2.85 kB {0} [built]
    [4] ./src/data/docs.js 3.35 kB {0}
    [5] ./src/components/DocIndex.js 6.1 kB {0}
    [7] ./src/components/DocSection.js 2.74 kB {0}
   [92] external "path" 42 bytes {0} [not cacheable]
webpack: bundle is now VALID.

examples not work with options.root.forEach(function(root) {^ TypeError: undefined is not a function

when i ran npm start,throw errors as follow

webpack: bundle is now VALID.
/Users/macbook/workspace/rui/native/react-native-webpack-server/Examples/CoffeeScript/node_modules/react-native/packager/packager.js:71
    options.root.forEach(function(root) {
                 ^
TypeError: undefined is not a function
    at Object.<anonymous> (/Users/macbook/workspace/rui/native/react-native-webpack-server/Examples/CoffeeScript/node_modules/react-native/packager/packager.js:71:18)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Function.Module.runMain (module.js:501:10)
    at startup (node.js:129:16)
    at node.js:814:3

Missing query string for url in bundle task

react-native 0.11.0 requires new query string to the url containing the bundle.

Currently getting this error when running bundle:

   Error: Error validating module options: child "platform" fails because ["platform" is required]
       at /.../react-native/packager/react-packager/src/lib/declareOpts.js:60:13
       at /.../react-native/packager/react-packager/src/Server/index.js:161:20
       at tryCallOne (/.../react-native/node_modules/promise/lib/core.js:37:12)
       at /.../react-native/node_modules/promise/lib/core.js:103:15
       at flush (/.../react-native/node_modules/promise/node_modules/asap/raw.js:50:29)
       at doNTCallback0 (node.js:408:9)
       at process._tickCallback (node.js:337:13)
   Error creating bundle... undefined

However changing

var url = 'http://localhost:' + opts.port + '/index.ios.bundle';

var url = 'http://localhost:' + opts.port + '/index.ios.bundle?platform=ios&dev=false'

makes the bundle succeed.

React Native 0.7

Not sure if you guys have issues as well, but I keep getting:

Server listening at http://localhost:8080
Webpack dev server listening at  http://localhost:8082
Unhandled rejection NotFoundError: Cannot find entry file index.ios.js in any of the roots: ["/Users/grabbou/Repositories/ExplosiveTitles/este-native/node_modules/react-native","/Users/grabbou/Repositories/ExplosiveTitles/este-native/node_modules/react-native-webpack-server/_entry"]
    at DependecyGraph.getOrderedDependencies (/Users/grabbou/Repositories/ExplosiveTitles/este-native/node_modules/react-native/packager/react-packager/src/DependencyResolver/haste/DependencyGraph/index.js:95:11)
    at /Users/grabbou/Repositories/ExplosiveTitles/este-native/node_modules/react-native/packager/react-packager/src/DependencyResolver/haste/index.js:96:35
    at tryCatcher (/Users/grabbou/Repositories/ExplosiveTitles/este-native/node_modules/bluebird/js/main/util.js:26:23)
    at Promise._settlePromiseFromHandler (/Users/grabbou/Repositories/ExplosiveTitles/este-native/node_modules/bluebird/js/main/promise.js:489:31)
    at Promise._settlePromiseAt (/Users/grabbou/Repositories/ExplosiveTitles/este-native/node_modules/bluebird/js/main/promise.js:565:18)
    at Async._drainQueue (/Users/grabbou/Repositories/ExplosiveTitles/este-native/node_modules/bluebird/js/main/async.js:128:12)
    at Async._drainQueues (/Users/grabbou/Repositories/ExplosiveTitles/este-native/node_modules/bluebird/js/main/async.js:133:10)
    at Immediate.Async.drainQueues [as _onImmediate] (/Users/grabbou/Repositories/ExplosiveTitles/este-native/node_modules/bluebird/js/main/async.js:15:14)
    at processImmediate [as _immediateCallback] (timers.js:358:17)
Unhandled rejection SyntaxError: TransformError: /Users/grabbou/Repositories/ExplosiveTitles/este-native/node_modules/react-native/packager/react-packager/src/DependencyResolver/haste/polyfills/prelude_dev.js: ENOENT, open '/Users/grabbou/Repositories/ExplosiveTitles/este-native/node_modules/react-native/packager/react-packager/src/DependencyResolver/haste/polyfills/prelude_dev.js'
[BABEL] The transformer es6.parameters.rest has been renamed to es6.parameters
[17:17:44] <START> find dependencies
[17:17:44] <END>   find dependencies (21ms)
[17:17:44] <START> transform
Hash: ea23e60d7042c5694560
Version: webpack 1.9.12
Time: 6395ms
           Asset     Size  Chunks             Chunk Names
    index.ios.js  1.56 MB       0  [emitted]  index.ios
index.ios.js.map  1.79 MB       0  [emitted]  index.ios
chunk    {0} index.ios.js, index.ios.js.map (index.ios) 1.5 MB [rendered]
webpack: bundle is now VALID.
Unhandled rejection SyntaxError: TransformError: /Users/grabbou/Repositories/ExplosiveTitles/este-native/node_modules/react-native/packager/react-packager/src/DependencyResolver/haste/polyfills/prelude_dev.js: ENOENT, open '/Users/grabbou/Repositories/ExplosiveTitles/este-native/node_modules/react-native/packager/react-packager/src/DependencyResolver/haste/polyfills/prelude_dev.js'
Unhandled rejection SyntaxError: TransformError: /Users/grabbou/Repositories/ExplosiveTitles/este-native/node_modules/react-native/packager/react-packager/src/DependencyResolver/haste/polyfills/prelude_dev.js: ENOENT, open '/Users/grabbou/Repositories/ExplosiveTitles/este-native/node_modules/react-native/packager/react-packager/src/DependencyResolver/haste/polyfills/prelude_dev.js'
[BABEL] The transformer es6.parameters.rest has been renamed to es6.parameters
[17:17:51] <START> find dependencies
[17:17:51] <END>   find dependencies (35ms)
[17:17:51] <START> transform

 ===============================================================
 |  Running packager on port 8081.       
 |  Keep this packager running while developing on any JS         
 |  projects. Feel free to close this tab and run your own      
 |  packager instance if you prefer.                              
 |                                                              
 |     https://github.com/facebook/react-native                 
 |                                                              
 ===============================================================

Looking for JS files in
   /Users/grabbou/Repositories/ExplosiveTitles/este-native/node_modules/react-native
   /Users/grabbou/Repositories/ExplosiveTitles/este-native/node_modules/react-native-webpack-server/_entry 

 ERROR  Packager can't listen on port 8081
Most likely another process is already using this port
Run the following command to find out which process:

   lsof -n -i4TCP:8081 

You can either shut down the other process:

   kill -9 <PID> 

or run packager on different port.

See http://facebook.github.io/react-native/docs/troubleshooting.html
for common problems and solutions.

Bug with 0.4.3 with requiring

Not sure exactly how to solve this, but with the latest version of RN the webpack server cannot find the NavigatorNavigationBarStyles or the StaticContainer.react library.

Stuck on Step 2 of Setup

I get stuck on this step...

By default React Native will look for an index.ios.js at the root of the project. Delete this file and add an entry in your webpack config:

There's two things I don't really understand about this step...

Do you really want me to delete my index.ios.js file or delete a reference to that file in the webpack.config?
I cannot find the webpack.config file. Should I expect to find it in my root?

Sever crashes if request comes in before packager server starts

It is a race. We could swallow the exception which is not ideal. I'd rather wait till both the webpack and packager servers start before the main server is started. To do that we'll need facebook/react-native#2518

mjohnston / react-native-webpack-server Goto Github PK

react-native-webpack-server's People

Contributors

Stargazers

Watchers

Forkers

react-native-webpack-server's Issues

Recommend Projects

Recommend Topics

Recommend Org