React-hot-loader: Unable to use v3-beta.1 with Server rendering and react-router and redux

[morajabi]

It's my render part in client:

// Render app in browser
const rootCompProps = { store: store, history: history, routes: routes };
render(
  <Root {...rootCompProps} />,
  rootElement
);

// Hot module replacment for dev purpose

if (module.hot) {
  module.hot.accept( () => {
    const NextRoot = require('../common/containers/Root').default;
    render(
      <AppContainer>
        <NextRoot {...rootCompProps} />
      </AppContainer>,
      rootElement
    );
  });
}

There's no error until I change something in App component and i will get one of these errors:

• does not support changing store on the fly. It is most likely that you see this error because you updated to Redux 2.x and React Redux 2.x which no longer hot reload reducers automatically.
• Warning: [react-router] You cannot change ; it will be ignored
• Warning: [react-router] You cannot change ; it will be ignored

or when I add this:
module.hot.accept('../common/containers/Root', () => {
I will get:

• [HMR] The following modules couldn't be hot updated: (Full reload needed)

[paulwithap]

Try importing routes into Root.js rather than passing it as a prop.

[morajabi]

OK, I will try ASAP, but "... does not support changing store on the fly. ..." won't solve IMO.

[paulwithap]

My fix will solve your second error. You have to pass the path you what to hot replace in as the first parameter to module.hot.accept(), so your code should look like this:

// Render app in browser
const rootCompProps = { store: store, history: history }; // import routes in Root.js
render(
  <Root {...rootCompProps} />,
  rootElement
);

// Hot module replacment for dev purpose

if (module.hot) {
  module.hot.accept('../common/containers/Root', () => {
    const NextRoot = require('../common/containers/Root').default;
    render(
      <AppContainer>
        <NextRoot {...rootCompProps} />
      </AppContainer>,
      rootElement
    );
  });
}

[morajabi]

I said i have tested this way in last part of my issue. In this way Nothing will be hot reloaded.

[paulwithap]

Look at my code again. It is not the same as your original code. I'm not passing routes in as a prop to <Root />, I'm importing it directly into Root.js.

Here is how the file should look:

Root.js

import React, { PropTypes as T } from 'react';
import { Provider } from 'react-redux';
import { Router } from 'react-router';
import routes from '../routes';

const Root = ({ store, history }) => (
  <Provider store={store}>
    <Router history={history} routes={routes} />
  </Provider>
);

Root.propTypes = {
  store: T.object,
  history: T.object
};

export default Root;

[morajabi]

Why when I add this line:
module.hot.accept('../common/containers/Root', () => {
instead of this:
module.hot.accept( () => {
It fails with a warning:
[HMR] The following modules couldn't be hot updated: (Full reload needed)
Why doesn't detect what changed?

[max-mykhailenko]

I have same errors, but hot reloading works correct. Any progress with it?

does not support changing store on the fly. It is most likely that you see this error because you updated to Redux 2.x and React Redux 2.x which no longer hot reload reducers automatically.

Warning: [react-router] You cannot change ; it will be ignored

Warning: [react-router] You cannot change ; it will be ignored

[morajabi]

I do hot reload reducers myself, it's not the problem.

[calesce]

@morajabi have you tried defining your routes in a separate module and accepting that module, like this? Also, there won't be a way to get rid of the warning unless you patch console.error, see #298.

It shouldn't have an impact on using with Redux, since you only need to create the store once and reload the reducers. I'll push up an additional example of using RHL with both libs if you're interested.

[morajabi]

@calesce Thx. I will try that out ASAP.

[morajabi]

I think it worked! but with the following error:
Warning: [react-router] You cannot change <Router routes>; it will be ignored

[calesce]

Yeah, unfortunately that's something that probably won't be fixed in React Router 2/3. For now, it's probably best to either ignore it, or patch console.error to ignore that specific warning (which is relatively safe but shouldn't be necessary).

[morajabi]

I've got a problem with this solution, errors within a component will become: check render method of AppContainer

[morajabi]

Hey, Can we solve this problem?