Hot Reloading Not Working

[mindjuice]

Thanks for the nice boilerplate.

When I change .js files though (e.g., src/components/Header/index.js), the browser doesn't hot reload them. I get the following error in the JS console.

[HMR] The following modules couldn't be hot updated: (They would need a full reload!) bundle.js [HMR] - 256

I found this page that mentions the error, but I don't see how the described cause applies:

• https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md

Any idea why this happens? Does it work for you?

[anorudes]

Maybe it happens when you changed stateless function components. Will try replace

export const Header = () => (
  <div className={`${styles}`}>
    Redux easy boilerplate
  </div>
);

on

export class Header extends Component {
  render() {
    return (
      <div className={`${styles}`}>
        Redux easy boilerplate
      </div>
    );
  }
}

I saw this problem last, don't know how to resolve this.

[anorudes]

You right! It happens when tried to changed Header component, but Home and List worked. I'' try to fix this in next commit.

If replace "stateless function" with "class" the problem will resolve:

import React, { Component } from 'react';

/* component styles */
import styles from './styles';

export class Header extends Component {
  render() {
    return(
      <div className={`${styles}`}>
        Redux easy boilerplate
      </div>
    );
  }
}

[mindjuice]

Ah...I see. Wonder if this can be fixed in the hot reload code instead so that we can use those types of functions?

[mindjuice]

See here: https://github.com/gaearon/react-hot-loader/issues/145

[anorudes]

Don't know, I tryied to find the solution all last night. Love "stateless function" but it doesn't work with hot-reload and react-transform (see 2 branch)

[mindjuice]

Thanks for the help. I'll switch to normal components for now.

[anorudes]

I don't know why but the Header and the Footeer don't work with hot-reload. All others containers ("List", "Home") working and they are stateless function too. Maybe it'is bug hot reload library or maybe need to fix the code boilerplate. Don't saw "stateless function" components in others boilerplate :(

[mindjuice]

So what do you think? Should the boilerplate be changed to use normal components until hot reloading is working? Or just mention it as a caveat in the docs?

[anorudes]

I think "normal component" because we don't know how to fix bug with "stateless function" I don't have any time today :( If you want you'll can make new pull request for this task. Thanks :)

[anorudes]

I'll fix this problem with next commit. Also will merge with "react-transform" branch :)

[anorudes]

It's ok now. And i replaced hot-reload with react-transform for catch errors in the browser :)

[mindjuice]

Sorry...I was busy and didn't get a chance to work on this. Thanks for the fix!

[anorudes]

Thanks to you for issue and like the boilerplate :) :+1: