mjohnston / react-native-webpack-server Goto Github PK
View Code? Open in Web Editor NEWBuild React Native apps with Webpack
License: MIT License
Build React Native apps with Webpack
License: MIT License
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!
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;
So the port 8081 still be opened after killing the packageServer. You may use 'pkill -P pid' to instead of childProcess.kill().
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.
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';
to
var url = 'http://localhost:' + opts.port + '/index.ios.bundle?platform=ios&dev=false'
makes the bundle succeed.
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.
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?
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
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?
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'
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!
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:
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?
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:
Info.plist
<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.
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:
react/lib/ReactMount
react
package: you can give it react-native
in configuration just fineNot 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.
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!
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.
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.
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
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?
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')), {
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?
React Dev Tools show no components when hot loading is enabled, but run fine without hot loading.
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?
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?
ERROR in ./~/react-native/Libraries/react-native/react-native.js Module not found: Error: Cannot resolve module 'ActivityIndicatorIOS' ..
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?
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?
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:
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.
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?
Source maps work perfectly when not using the hot loader...but when using the hot loader, two things happen:
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!
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?
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?
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...
They've renamed a few things:
All that needs to happen is ReactIOSMount
-> ReactNativeMount
in the hot/entry.js file.
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.
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
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
...
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
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
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)
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.
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
but I for sure know I spent three hours on this.
:-)
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)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.