{"action":"opened","issue":{"url":"https://api.github.com/repos/gaearon/react-transform-boilerplate/issues/91","labels_url":"https://api.github.com/repos/gaearon/react-transform-boilerplate/issues/91/labels{/name}","comments_url":"https://api.github.com/repos/gaearon/react-transform-boilerplate/issues/91/comments","events_url":"https://api.github.com/repos/gaearon/react-transform-boilerplate/issues/91/events","html_url":"https://github.com/gaearon/react-transform-boilerplate/issues/91","id":124548772,"number":91,"title":"ES6 `=>` Components Cause `The following modules couldn't be hot updated` Warning","user":{"login":"theengineear","id":6611546,"avatar_url":"https://avatars.githubusercontent.com/u/6611546?v=3","gravatar_id":"","url":"https://api.github.com/users/theengineear","html_url":"https://github.com/theengineear","followers_url":"https://api.github.com/users/theengineear/followers","following_url":"https://api.github.com/users/theengineear/following{/other_user}","gists_url":"https://api.github.com/users/theengineear/gists{/gist_id}","starred_url":"https://api.github.com/users/theengineear/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/theengineear/subscriptions","organizations_url":"https://api.github.com/users/theengineear/orgs","repos_url":"https://api.github.com/users/theengineear/repos","events_url":"https://api.github.com/users/theengineear/events{/privacy}","received_events_url":"https://api.github.com/users/theengineear/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2016-01-01T15:59:02Z","updated_at":"2016-01-01T15:59:02Z","closed_at":null,"body":"I'm working off of 63851aa6f785f33ec6ef842a755628dbd4ecc50b\r\n\r\nI did some refactoring of the `TODO` application from the [egghead.io redux video series](https://egghead.io/series/getting-started-with-redux) to move the components into their own component files using the suggested ES6 `=>` syntax. However, after trying to move this project over to use React Transform, I'm getting the following warning (or a similar warning) on all component changes:\r\n\r\n```\r\n[HMR] The following modules couldn't be hot updated: (Full reload needed)\r\nprocess-update.js?e13e:64\r\n[HMR]  - ./src/App.js\r\n```\r\n\r\nThe most minimal working example I can give is the following (after cloning this repo):\r\n\r\n1. Move the `Counter` code into a new component module:\r\n    ```javascript\r\n    // src/Counter.js\r\n    import React, { Component } from 'react';\r\n  \r\n    class Counter extends Component {\r\n      constructor(props) {\r\n        super(props);\r\n        this.state = { counter: 0 };\r\n        this.interval = setInterval(() => this.tick(), 1000);\r\n      }\r\n  \r\n      tick() {\r\n        this.setState({\r\n          counter: this.state.counter + this.props.increment\r\n        });\r\n      }\r\n  \r\n      componentWillUnmount() {\r\n        clearInterval(this.interval);\r\n      }\r\n  \r\n      render() {\r\n        return (\r\n          <h1 style={{ color: this.props.color }}>\r\n            Counter ({this.props.increment}): {this.state.counter}\r\n          </h1>\r\n        );\r\n      }\r\n    }\r\n  \r\n    export default Counter;\r\n\r\n    ```\r\n2. Update `App.js` to the following:\r\n    ```javascript\r\n    // src/App.js\r\n    import React, { Component } from 'react';\r\n    import { NICE, SUPER_NICE } from './colors';\r\n    \r\n    import Counter from './Counter';\r\n    \r\n    // This only works when `Counter` is defined *inside* this file.\r\n    export const App = () => (\r\n      <div>\r\n        <Counter increment={1} color={NICE} />\r\n        <Counter increment={5} color={SUPER_NICE} />\r\n      </div>\r\n    );\r\n    \r\n    // This will work when `Counter` is defined inside *or* outside this file.\r\n    //export class App extends Component {\r\n    //  render() {\r\n    //    return (\r\n    //      <div>\r\n    //        <Counter increment={10} color={NICE} />\r\n    //        <Counter increment={5} color={SUPER_NICE} />\r\n    //      </div>\r\n    //    );\r\n    //  }\r\n    //}\r\n\r\n    ```\r\n\r\nIf you attempt to change the `increment` you'll get the warning mentioned above about the change requiring a *full reload*.\r\n\r\nIs this expected behavior? My major question is whether the React Transform implementation requires all the components to be extended from `React.Component`?\r\n\r\nHappy New Year and thanks for all the work on redux / hot reloading!\r\n"}}