{"action":"created","issue":{"url":"https://api.github.com/repos/mjohnston/react-native-webpack-server/issues/103","labels_url":"https://api.github.com/repos/mjohnston/react-native-webpack-server/issues/103/labels{/name}","comments_url":"https://api.github.com/repos/mjohnston/react-native-webpack-server/issues/103/comments","events_url":"https://api.github.com/repos/mjohnston/react-native-webpack-server/issues/103/events","html_url":"https://github.com/mjohnston/react-native-webpack-server/issues/103","id":110878284,"number":103,"title":"Fix hot module replacement for RN 0.12","user":{"login":"elliottsj","id":2177366,"avatar_url":"https://avatars.githubusercontent.com/u/2177366?v=3","gravatar_id":"","url":"https://api.github.com/users/elliottsj","html_url":"https://github.com/elliottsj","followers_url":"https://api.github.com/users/elliottsj/followers","following_url":"https://api.github.com/users/elliottsj/following{/other_user}","gists_url":"https://api.github.com/users/elliottsj/gists{/gist_id}","starred_url":"https://api.github.com/users/elliottsj/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/elliottsj/subscriptions","organizations_url":"https://api.github.com/users/elliottsj/orgs","repos_url":"https://api.github.com/users/elliottsj/repos","events_url":"https://api.github.com/users/elliottsj/events{/privacy}","received_events_url":"https://api.github.com/users/elliottsj/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":18,"created_at":"2015-10-11T19:31:38Z","updated_at":"2015-10-26T19:28:21Z","closed_at":null,"body":"New in react-native@0.12: when using the Chrome debugger, the app bundle is now run **inside a [web worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)**: https://github.com/facebook/react-native/pull/1632, https://github.com/facebook/react-native/commit/8db35d492b846f51a758e8ee7e5e402c6bad3785\r\n\r\nThis means that an app bundle built with webpack's [hot module replacement](https://webpack.github.io/docs/hot-module-replacement.html) enabled will raise errors such as #99, and hot module replacement will fail.\r\n\r\n---\r\n\r\nI'm able to get HMR working on the [rn-0.12-hmr](https://github.com/mjohnston/react-native-webpack-server/tree/rn-0.12-hmr) branch by doing the following:\r\n* Use [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) + [webpack-hot-middleware](https://github.com/glenjamin/webpack-hot-middleware) instead of [webpack/hot/only-dev-server](https://github.com/webpack/webpack/blob/9f440e30ecac00bfc27b91d372a969d3414d194c/hot/only-dev-server.js) + [webpack-dev-server/client](https://github.com/webpack/webpack-dev-server/blob/c52035ef0664fecc74a4a0dc481e39c523426f88/client/index.js):\r\n\r\n  webpack-dev-server [depends on `window.postMessage`](https://github.com/webpack/webpack-dev-server/blob/c52035ef0664fecc74a4a0dc481e39c523426f88/client/index.js#L79) 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](https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage). webpack-hot-middleware is an alternative which combines the functionality of both `webpack/hot/only-dev-server` and `webpack-dev-server/client`.\r\n\r\n* 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: https://github.com/elliottsj/webpack/commit/743a00a8bc491f1900ce9f49150229183f874da1.\r\n\r\n  ~~Known issue: this inexplicable error is thrown every time a module is hot reloaded:~~\r\n  **Edit**: turns out this was caused by adding `webpack.HotModuleReplacementPlugin()` to the config twice instead of once (－‸ლ)\r\n\r\n  <img width=\"807\" alt=\"screenshot 2015-10-11 15 07 53\" src=\"https://cloud.githubusercontent.com/assets/2177366/10418513/2494f736-702b-11e5-8912-d7cbf8cafa3c.png\">\r\n\r\n  ~~Not sure why this happens; the original error message & stack gets lost somewhere.~~\r\n\r\n**Try out [rn-0.12-hmr/Examples/BabelES6](https://github.com/mjohnston/react-native-webpack-server/tree/rn-0.12-hmr/Examples/BabelES6) for a working example.**\r\n\r\nMy 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.\r\n\r\nDoes anyone have any ideas on the proper way to do HMR from inside the web worker? cc @gaearon @sokra"},"comment":{"url":"https://api.github.com/repos/mjohnston/react-native-webpack-server/issues/comments/151257807","html_url":"https://github.com/mjohnston/react-native-webpack-server/issues/103#issuecomment-151257807","issue_url":"https://api.github.com/repos/mjohnston/react-native-webpack-server/issues/103","id":151257807,"user":{"login":"niftylettuce","id":523141,"avatar_url":"https://avatars.githubusercontent.com/u/523141?v=3","gravatar_id":"","url":"https://api.github.com/users/niftylettuce","html_url":"https://github.com/niftylettuce","followers_url":"https://api.github.com/users/niftylettuce/followers","following_url":"https://api.github.com/users/niftylettuce/following{/other_user}","gists_url":"https://api.github.com/users/niftylettuce/gists{/gist_id}","starred_url":"https://api.github.com/users/niftylettuce/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/niftylettuce/subscriptions","organizations_url":"https://api.github.com/users/niftylettuce/orgs","repos_url":"https://api.github.com/users/niftylettuce/repos","events_url":"https://api.github.com/users/niftylettuce/events{/privacy}","received_events_url":"https://api.github.com/users/niftylettuce/received_events","type":"User","site_admin":false},"created_at":"2015-10-26T19:28:21Z","updated_at":"2015-10-26T19:28:21Z","body":"@elliottsj Hot reloading still doesn't seem to work - and now neither does LiveReload"}}