{"action":"created","issue":{"url":"https://api.github.com/repos/gadicc/meteor-hmr/issues/45","repository_url":"https://api.github.com/repos/gadicc/meteor-hmr","labels_url":"https://api.github.com/repos/gadicc/meteor-hmr/issues/45/labels{/name}","comments_url":"https://api.github.com/repos/gadicc/meteor-hmr/issues/45/comments","events_url":"https://api.github.com/repos/gadicc/meteor-hmr/issues/45/events","html_url":"https://github.com/gadicc/meteor-hmr/issues/45","id":149162867,"number":45,"title":"React Hot Loader 3.0 alpha demo","user":{"login":"gadicc","id":381978,"avatar_url":"https://avatars.githubusercontent.com/u/381978?v=3","gravatar_id":"","url":"https://api.github.com/users/gadicc","html_url":"https://github.com/gadicc","followers_url":"https://api.github.com/users/gadicc/followers","following_url":"https://api.github.com/users/gadicc/following{/other_user}","gists_url":"https://api.github.com/users/gadicc/gists{/gist_id}","starred_url":"https://api.github.com/users/gadicc/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gadicc/subscriptions","organizations_url":"https://api.github.com/users/gadicc/orgs","repos_url":"https://api.github.com/users/gadicc/repos","events_url":"https://api.github.com/users/gadicc/events{/privacy}","received_events_url":"https://api.github.com/users/gadicc/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":12,"created_at":"2016-04-18T14:12:44Z","updated_at":"2016-04-25T19:37:15Z","closed_at":"2016-04-22T16:16:42Z","body":"See https://github.com/gaearon/react-hot-boilerplate/pull/61.\r\n\r\nRequires `gadicc:ecmascript-hot@1.3.2-fast.14`.\r\n\r\n## Remove the old setup\r\n\r\n1. `npm rm --save-dev babel-plugin-react-transform react-transform-hmr react-transform-catch-errors`\r\n1. Remove the entire `react-transform` section from your `client/.babelrc` env block\r\n1. Modify your `package.json` to have a section like:\r\n\r\n  ```js\r\n  {\r\n    \"ecmascript-hot\": {\r\n      \"transformStateless\": {\r\n        \"pathMatch\": \"NOMATCH\"\r\n      }\r\n    }\r\n}\r\n```\r\n\r\n## Add the new setup\r\n\r\n1. `npm install --save-dev react-hot-loader@^3.0.0-alpha.12` (check latest release)\r\n1. In your *project root* `.babelrc`, make sure you have `{ \"plugins\": [\"react-hot-loader/babel\"] }`\r\n1. Modify your main client entry point / wherever you mount your root to resemble:\r\n\r\n  ```js\r\nimport { AppContainer } from 'react-hot-loader';  // <-- add this line\r\nimport Root from './containers/Root';  // example; wherever you keep your main component\r\n\r\n// Wherever you do this, probably in Meteor.startup()\r\nReactDOM.render(\r\n  <AppContainer\r\n    component={Root}\r\n    props={{ store }}     {/* if e.g. you're using redux */}\r\n  />,\r\n  document.getElementById('root')\r\n);\r\n\r\n// This section is new, the references to \"containers/Root\" should match your import statement\r\nif (module.hot) {\r\n  module.hot.accept('./containers/Root', () => {\r\n    render(\r\n      <AppContainer\r\n        component={require('./containers/Root').default}\r\n        props={{ store }}\r\n      />,\r\n      document.getElementById('root')\r\n    );\r\n  });\r\n}\r\n```\r\n\r\n3. You need to `import 'react-hot-loader/patch';` *before* importing React.  If you have a *single* client entry-point and get everything else from `imports`, just add this as your first line.  If you still use a \"regular\" client directory (with more than 1 file), try place just this line in a file called `client/_patchReact.js` (or possibly in `client/lib` if you use react from within that directory).\r\n\r\nThere's an (incredibly convoluted) example at https://github.com/gadicc/meteor-react-hotloader/tree/master/demo-rhl3."},"comment":{"url":"https://api.github.com/repos/gadicc/meteor-hmr/issues/comments/214494059","html_url":"https://github.com/gadicc/meteor-hmr/issues/45#issuecomment-214494059","issue_url":"https://api.github.com/repos/gadicc/meteor-hmr/issues/45","id":214494059,"user":{"login":"clayne11","id":2831444,"avatar_url":"https://avatars.githubusercontent.com/u/2831444?v=3","gravatar_id":"","url":"https://api.github.com/users/clayne11","html_url":"https://github.com/clayne11","followers_url":"https://api.github.com/users/clayne11/followers","following_url":"https://api.github.com/users/clayne11/following{/other_user}","gists_url":"https://api.github.com/users/clayne11/gists{/gist_id}","starred_url":"https://api.github.com/users/clayne11/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/clayne11/subscriptions","organizations_url":"https://api.github.com/users/clayne11/orgs","repos_url":"https://api.github.com/users/clayne11/repos","events_url":"https://api.github.com/users/clayne11/events{/privacy}","received_events_url":"https://api.github.com/users/clayne11/received_events","type":"User","site_admin":false},"created_at":"2016-04-25T19:37:15Z","updated_at":"2016-04-25T19:37:15Z","body":"It seems like the common issue here is the Meteor package system. I'm thinking that the `react-hot-loader` babel transform doesn't run properly with Meteor packages because the dependency tree is pretty broken.\r\n\r\nI'm starting the painful process of migrating my entire app over into the `imports` folder and using proper ES6 modules throughout rather than the hacky Meteor packages. It's going to be a lot of work but I think it'll be worth it in the end.\r\n\r\nI transitioned a few pages over to start and `refactor.6` is working perfectly, however I won't be able to actually use `react-hot-loader/patch` until I refactor my entire app :/."}}