Fix hot module replacement for RN 0.12

[elliottsj]

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.postMessage to 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 different postMessage API. webpack-hot-middleware is an alternative which combines the functionality of both webpack/hot/only-dev-server and webpack-dev-server/client.

• Patch webpack so it uses importScripts inside 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

[sokra]

WebWorkerMainTemplate.runtime.js is the way to go. Settings target: "webworker" will enabled it. Should be pretty easy to write as importScripts is sync.

WebWorkerHotUpdateChunkTemplatePlugin.js is also needed to defined the hot update chunk format for web workers, but it can be equal to JsonpHotUpdateChunkTemplatePlugin.js.

If someone want to do a PR to webpack, I would be happy...

[elliottsj]

Opened PR to support HMR in web workers: webpack/webpack#1521

[dapetcu21]

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.

[paolorovella]

@dapetcu21 Hi, i'm stuck with this webworker error and maybe you can help me. Where did you put the "var worker = new Worker("bundle.js");"?

[elliottsj]

@paolorovella You don't need var worker = new Worker("bundle.js");. The RN debugger will load the bundle into a web worker for you; try out the rn-0.12-hmr/Examples/BabelES6 example.

[paolorovella]

I finally did it! I'm using RN 0.12 + react-native-webpack-server#rn-0.12-hmr + elliottsj/webpack#web-worker-hmr + webpack-hot-middleware without var worker = new Worker('bundle.js'); and without target:"webworker...thank you so much :)

[dapetcu21]

@paolorovella: Yup. Exactly same setup worked for me, as well. I was initially trying the rn-0.12-hack branch that was mentioned earlier.

[elliottsj]

Just pushed an update to rn-0.12-hmr/Examples/BabelES6: it now uses the changes from webpack/webpack#1521 instead of the hack.

[paolorovella]

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?

[dapetcu21]

You need to change localhost to your computer's IP/hostname in AppDelegate.m

[dapetcu21]

Also, webpack's publicPath should include your hostname as well

[paolorovella]

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.