ES6 => Components Cause The following modules couldn't be hot updated Warning

[theengineear]

I'm working off of 63851aa

I did some refactoring of the TODO application from the egghead.io redux video series 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:

[HMR] The following modules couldn't be hot updated: (Full reload needed)
process-update.js?e13e:64
[HMR]  - ./src/App.js

The most minimal working example I can give is the following (after cloning this repo):

1. Move the Counter code into a new component module:

   // src/Counter.js
   import React, { Component } from 'react';
   
   class Counter extends Component {
     constructor(props) {
       super(props);
       this.state = { counter: 0 };
       this.interval = setInterval(() => this.tick(), 1000);
     }
   
     tick() {
       this.setState({
         counter: this.state.counter + this.props.increment
       });
     }
   
     componentWillUnmount() {
       clearInterval(this.interval);
     }
   
     render() {
       return (
         <h1 style={{ color: this.props.color }}>
           Counter ({this.props.increment}): {this.state.counter}
         </h1>
       );
     }
   }
   
   export default Counter;

2. Update App.js to the following:

   // src/App.js
   import React, { Component } from 'react';
   import { NICE, SUPER_NICE } from './colors';
   
   import Counter from './Counter';
   
   // This only works when `Counter` is defined *inside* this file.
   export const App = () => (
     <div>
       <Counter increment={1} color={NICE} />
       <Counter increment={5} color={SUPER_NICE} />
     </div>
   );
   
   // This will work when `Counter` is defined inside *or* outside this file.
   //export class App extends Component {
   //  render() {
   //    return (
   //      <div>
   //        <Counter increment={10} color={NICE} />
   //        <Counter increment={5} color={SUPER_NICE} />
   //      </div>
   //    );
   //  }
   //}

If you attempt to change the increment you'll get the warning mentioned above about the change requiring a full reload.

Is this expected behavior? My major question is whether the React Transform implementation requires all the components to be extended from React.Component?

Happy New Year and thanks for all the work on redux / hot reloading!

[ghost]

react-transform support for functional components is still pending: gaearon/babel-plugin-react-transform#57

[theengineear]

@danmartinez101 thanks for the quick response! As long as I'm getting the current expected behavior, I'm happy :)

I'll close this down in favor of the thread happening in gaearon/babel-plugin-react-transform#57

[gaearon]

React Hot Loader 3 supports functional components without destroying the state.
Check it out: gaearon/react-hot-boilerplate#61