Prevents Hot Loader from Refreshing Page

[garretto]

Found another issue. I'm using react-transform-hmr and this extension prevents the page from refreshing if a full refresh is required. For example, if I change code in my action creators. Instead of refreshing, I get a JavaScript TypeError saying e is not a function. Then I have to refresh the page manually.

Any ideas? Thanks!

[zalmoxisus]

As far as I know, HMR deals only with reducers (if you enable it in your store) as you can use replaceReducer for that. For action creators you do have to refresh the page manually. Does it work when you disable the extension?

About the "JavaScript TypeError saying e is not a function" cannot reproduce it with the counter example. Could you share an example? BTW, it would be a great contribution to have here a simple ImmutableJS example to check it when we implement new features.

[zalmoxisus]

Hey @garretto,

Even though I cannot reproduce it, should be fixed in 0.4.16. Could you please give it a try?

[gaearon]

For action creators you do have to refresh the page manually.

To be fair action creators should be reloaded if you use React Hot Loader. They don't with React Transform—we'll fix that eventually but not very soon.

[garretto]

@zalmoxisus I tried with the new version and no dice. Something in the plugin prevents a full page reload. Also for editing reducers actually. Ended up just installing redux-dev-tools into my project and it works fine there.

Also should have mentioned I'm using react-transform-hmre @gaearon not react-hot-loader. Thanks for creating both of those by the way. :)

[garretto]

If I get some time I'll try to reproduce with the counter example.

[zalmoxisus]

That's strange, just tried babel-preset-react-hmre and don't see any difference. As I see, it also includes react-transform-hmr. A PR to the counter example to reproduce that, would be welcome.

[nirrek]

The .babelrc of the react-transform-boilerplate looks like this:

{
  "presets": ["react", "es2015"],
  "env": {
    "development": {
      "presets": ["react-hmre"]
    }
  }
}

Whereas the .babelrc of the counter example looks like this:

{
  "presets": [ "es2015", "stage-0", "react" ],
  "plugins": [ "add-module-exports", "transform-decorators-legacy" ]
}

If you remove the add-modules-exports plugin from the counter example's .babelrc, you will see the error @garretto refers to. Namely: TypeError: e is not a function will be printed inside the devtools window if you update a reducer (counter.js in this particular case).

Similarly, if you install babel-plugin-add-modules-exports and add it to the .babelrc of your react-transform-boilerplate based project, hot loading of reducers should work.

[zalmoxisus]

@nirrek, thanks for the explanation. In the unbuilt (unuglified) extension TypeError: e is not a function becomes TypeError: reducer is not a function. Without the extension (and DevTools at all) I also get this error as TypeError: currentReducer is not a function and hmr doesn't work. While changing const nextReducer = require('../reducers'); to const nextReducer = require('../reducers').default; fixes it, which is actually the same as we get with babel-plugin-add-modules-exports.

I'm curious to see the case when the error occurs only with the extension enabled and especially looking forward to seeing how we can get actions hot reloaded.

[gaearon]

FYI we added an explicit error message in Redux 3.1.5 for this.
reduxjs/redux#1321

[zalmoxisus]

@gaearon, unfortunately, this doesn't help in our case as replaceReducer doesn't get the nextReducer directly, but through liftReducer. May I add that exception also into the liftReducer's function?

[gaearon]

Oh, good point. Want to make a PR?

[zalmoxisus]

@gaearon, gladly :)
I added the same message about nextReducer there as to be easier to google the error.

[zalmoxisus]

Should be fixed in v1.0.0-beta3 with more descriptive error. Thanks, @gaearon, the provided explanation for the error is great!

@garretto, if you still have that error and have time to provide an example or to add some hints on how to reproduce it, please reopen the issue.