Fix hot module replacement for RN 0.12 #103
Comments
|
If someone want to do a PR to webpack, I would be happy... |
|
Opened PR to support HMR in web workers: webpack/webpack#1521 |
|
I tried using your branch, but I get this warning the first time I change a file (and HMR doesn't work): Any opinions? UPDATE: Nevermind. It worked with your webpack PR. |
|
@dapetcu21 Hi, i'm stuck with this webworker error and maybe you can help me. Where did you put the |
|
@paolorovella You don't need |
|
I finally did it! I'm using |
|
@paolorovella: Yup. Exactly same setup worked for me, as well. I was initially trying the |
|
Just pushed an update to rn-0.12-hmr/Examples/BabelES6: it now uses the changes from webpack/webpack#1521 instead of the hack. |
|
Hi! Since i was very happy for the working HMR in my simulator, i've decided to try on my iPhone 6. Unfortunately it doesn't work and this is my console. Any ideas? |
|
You need to change localhost to your computer's IP/hostname in AppDelegate.m |
|
Also, webpack's publicPath should include your hostname as well |
|
I've already done it but it doesn't work :/ if it can helps, if i go to http://localhost:8082/ i get "Cannot get /" but if i go to http://192.168.1.156:8082/ the page is not available. |
|
Firewall settings?
|
|
Firewall deactivated :) could it be a port forwarding router problem? 8082 closed port i mean |
|
It could be that rnws binds only to localhost: |
|
@dapetcu21 i've changed in |
|
@dapetcu21 i've forgotten to set http://192.168.1.156:8082 in |
|
@elliottsj You're missing |
|
@elliottsj Hot reloading still doesn't seem to work - and now neither does LiveReload |
|
@elliottsj Here's some output if it helps... this occurs after I save a file (the debugger/websocket stuff is connected already, it looks like the hotpack files might not be reloading properly or triggering intent refresh or something, not sure...?) |
|
Invalid HMR message: {"action":"built","time":441,"hash":"872a39c5ec3c5bdae6a4","warnings":[],"errors":[],"modules":{"0":"multi index.android","1":"./ |
|
|
|
Here's my var path = require('path');
var webpack = require('webpack');
var config = {
context: __dirname,
debug: true,
devtool: 'source-map',
watch: true,
entry: {
'index.ios': ['./src/main.ios.js']
'index.android': ['./src/main.android.js'],
},
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name].js',
},
module: {
loaders: [
{
test: /\.(js|jsx|es6)$/,
loader: 'babel-loader',
include: [
path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'node_modules/react-native-button'),
path.resolve(__dirname, 'node_modules/react-native-form')
],
query: {
optional: [
'runtime'
],
stage: 0,
plugins: []
}
}
]
},
resolve: { extensions: ['', '.js', '.jsx', '.es6'] },
plugins: []
};
// Hot loader
if (process.env.HOT) {
config.devtool = 'source-map';
config.entry['index.ios'].unshift(
'react-native-webpack-server/hot/entry',
'webpack-hot-middleware/client?path=http://localhost:8082/__webpack_hmr&overlay=false'
);
config.output.publicPath = 'http://localhost:8082/';
config.plugins.unshift(
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
);
config.module.loaders[0].query.plugins.push('react-transform');
config.module.loaders[0].query.extra = {
'react-transform': {
transforms: [
{
transform: 'react-transform-hmr',
imports: ['react-native'],
locals: ['module']
}
]
}
};
}
// 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;Here's my {
"name": "App",
"version": "0.0.1",
"private": true,
"scripts": {
"bundle": "react-native-webpack-server bundle",
"start": "react-native-webpack-server start",
"hot": "HOT=1 react-native-webpack-server start --hot",
"start-android-webpack-server": "HOT=1 react-native-webpack-server start --hot -e index.android -P 9090 -p 9091 -w 9092",
"install-app-to-android-device": "cd android && ./gradlew installDebug",
"setup-reverse-tcp-for-android-device": "adb reverse tcp:8081 tcp:9090",
"launch-android-app-on-device": "cd android && adb shell am start -n com.\"$npm_package_name\"/.MainActivity",
"android": "npm run-script setup-reverse-tcp-for-android-device && npm run-script install-app-to-android-device && npm run-script launch-android-app-on-device && echo \"Please Reload JS on the app from the menu after the webpack server starts below\" && npm run-script start-android-webpack-server"
},
"dependencies": {
"react-native": "~0.12.0",
"react-native-button": "^1.2.1",
"react-native-form": "^0.1.6"
},
"devDependencies": {
"babel-core": "^5.8.25",
"babel-loader": "^5.3.2",
"babel-plugin-react-transform": "^1.1.1",
"babel-runtime": "^5.8.25",
"eslint-plugin-react": "^3.6.1",
"react-native-webpack-server": "mjohnston/react-native-webpack-server#rn-0.12-hmr",
"react-transform-hmr": "^1.0.1",
"webpack": "elliottsj/webpack#web-worker-hmr"
}
} |
|
@niftylettuce You also need I'm happy to help on Discord#react-native-webpack if you need more help 😄 |
|
That didn't work, I got hotModule not defined error above if I put
|
|
Got it working! 🎈 |
|
Then share it! Step by step :-) Sent from my iPhone
|
|
@niftylettuce Did you make it worked? I have the same issue with you: Please share your tips. |
|
@niftylettuce I also have the same issue as you. How did you make it work? Hope you can help us, thanks! |
|
I don't recommend to use hotloading until it has complete Android and iOS
|
|
Thanks for publishing 0.9.0! Given recent changes does the title of this still make sense? I believe this may be the root cause of https://github.com/jhabdas/react-native-webpack-starter-kit/issues/73 |
|
Not sure. I'm not really interested in hot module replacement. If somebody wants to fix it for RN 0.13+, I'd be happy to entertain PRs. |
New in react-native@0.12: when using the Chrome debugger, the app bundle is now run inside a web worker: facebook/react-native#1632, facebook/react-native@8db35d4
This means that an app bundle built with webpack's hot module replacement enabled will raise errors such as #99, and hot module replacement will fail.
I'm able to get HMR working on the rn-0.12-hmr branch by doing the following:
Use webpack-dev-middleware + webpack-hot-middleware instead of webpack/hot/only-dev-server + webpack-dev-server/client:
webpack-dev-server depends on
window.postMessageto broadcast "webpackHotUpdate" events to any loaded scripts (usually just'webpack/hot/dev-server'or'webpack/hot/only-dev-server'), which does not work in the context of a web worker since web workers have a differentpostMessageAPI. webpack-hot-middleware is an alternative which combines the functionality of bothwebpack/hot/only-dev-serverandwebpack-dev-server/client.Patch webpack so it uses
importScriptsinside a web worker instead of the default behaviour of appending a<script>with the new hot-reloaded module: elliottsj/webpack@743a00a.Known issue: this inexplicable error is thrown every time a module is hot reloaded:Edit: turns out this was caused by adding
webpack.HotModuleReplacementPlugin()to the config twice instead of once (－‸ლ)Not sure why this happens; the original error message & stack gets lost somewhere.Try out rn-0.12-hmr/Examples/BabelES6 for a working example.
My patch to webpack seems quite hacky; I think the proper solution is to make something like 'WebWorkerMainTemplate.runtime.js', but I don't know enough about webpack internals to know what to do here.
Does anyone have any ideas on the proper way to do HMR from inside the web worker? cc @gaearon @sokra
The text was updated successfully, but these errors were encountered: