Only top-level component hot reloads

ETA: This issue actually does involve React Router, after all. Please see my comment further down the thread.

Previously:

I’m using 3.0.0-beta.1.

I originally thought the problem was with React Router but I’m updating the description to reflect what my problem actually is. React Router is fine.

Hot module reloading works for my root component and for any lower level components defined within the same module. However, hot module loading doesn’t seem to propagate down the import tree. Lower level components defined in separate files end up triggering the warning message, The following modules couldn't be hot updated: (They would need a full reload!).

Not sure what I’m doing wrong. Here’s how I’m telling webpack to re-render.

if (module.hot) {
  module.hot.accept('./root', () => {
    const NextRoot = require('./root').default;
    render(
      <AppContainer>
        <NextRoot {...{ store, history, onUpdate, routes }} />
      </AppContainer>,
      document.getElementById('app')
    );
  });
}

[gaearon]

Sorry, copy-pasting and setting up a project is really tedious to validate bug reports 😄 Can you please provide this on GitHub?

[davidlormor]

@benwiley4000 yes, whenever I switch the Route’s component from a stateless function to a class-based component the hot reload works, but when I switch it back to a stateless functional component the hot reload fails. (Tried across several routes/components)…it may have nothing to do with the Router, but rather something about stateless components, perhaps…like I mentioned I haven’t dived too deep into this issue, just sharing my observations.