With Redux Killing HMR

[maxsupera]

Hi. I have followed the next with redux example and just wrapping my page component in next-with-redux seems to kill my hmr. however, in this example, hmr is working fine.

I cant for the life of me figure out what exactly is killing my hmr... any help is greatly appreciated.

thanks in advance! :)

[steida]

Does your console log this?

[jaydenseric]

@steida I get that, but I can't work out why.

[arunoda]

Fixed with #2166

[maxsupera]

Im actually not getting that logged to console . I believe my problem is unrelated to the incomplete chunked encoding issue mentioned above...

[arunoda]

@HBWoodrose reopening then.

[steida]

Probably because of Node 8.0.0

[maxsupera]

Hey there. Thanks for reopening. I am actually running the LTS version of node 6.10.3.

The strange thing is, just wrapping the redux-with-next wrapper around my pages causes a full page reload on any file save. However, as mentioned above, this example runs fine without killing hmr. Which leads me to believe it is not a problem with next or node, but some configuration within my project.

I have rewritten the necessary code to resemble that project example mentioned above, except for the next.config and server.js, and my hmr is still getting killed.

I will continue to dig around and see if i can find what exactly is different in my project from that starter project mentioned above, and when i (hopefully) find the answer i will post it here for anyone else experiencing these issues.

unless someone has come across this and posts the solution first, of course.

thanks guys!! :)

[cjk]

@HBWoodrose What are your symptoms and how do you reproduce?

I'm using the latest next@beta (beta9) having similar problems when clicking on any link. The links gets followed, but as soon as it is rendered, the HMR reloads itself for no apparent reason and I'm back on the entry-page.
However, clicking the same link a second time (before it's cache expires) successfully loads the linked page without error / HMR-reload.

This used to work before (in beta8) and I don't know if a change in my code or in Next.js triggered it.

Node-version is 6.9.5 and I'm using redux-wrapper as well.

[cjk]

Update: Just updated to latest beta10-release and the link-/HMR-reload problem seems to be gone.

Big thanks to the maintainers for being that responsive! ❤️

[jpbourgeon]

I bumped next to 3.0.0-beta10 and downgraded node from 8.0 to 7.10
I don't use Redux but MobX

The net::ERR_INCOMPLETE_CHUNKED_ENCODING is gone

However I still experience the strange double page reloading described by @cjk

[maxsupera]

Hey everyone. Im gonna upgrade next beta10 and see if that fixes my issue, but i believe two separate issues are getting confused.

My issue is just that, after wrapping a page with next-with-redux, any time i save a file it causes a hard reload and kills the hmr.

It looks like some others were having an issue related to the router and linking as opposed to this.

Ill try beta10 now and post the results here...

Thanks everyone :)

[maxsupera]

Update: I upgraded to beta10 which did not fix the issue with next/redux. It did however do some strange things to my styles and how they are output. Now, a line like the following margin: 1rem 0; ends up coming out like this: margin: 1rem0; - removing the space and breaking the style. very strange...

[maxsupera]

It looks like on the Redux wrapper Github page, version 1.1.3 may address the hot reload issue, but has not been released yet. Ill keep checking for when it is finally released and update my findings here...

[steida]

Someone should rewrite Redux example at all, since it distributes state in modules via singletons, which is wrong. http://misko.hevery.com/2008/08/17/singletons-are-pathological-liars/
My solution https://github.com/este/este/blob/next/lib/create-redux-store.js

[migueloller]

HMR doesn't seem to work with any HoC.

Try the following:

import React from 'react'

const hoc = Component => class extends React.Component {
  render() {
    return <Component {...this.props} />
  }
}

class Page extends React.Component {
  state = { value: '' }

  handleChange = ({ target: { value } }) => this.setState({ value })

  render() {
    return (
      <div>
        <label htmlFor="input">
          <span>Label: </span>
        </label>
        <input id="input" type="text" value={this.state.value} onChange={this.handleChange} />
      </div>
    )
  }
}

// export default Page
export default hoc(Page)

If you type something on the input and then trigger HMR (i.e., change the label text) then the state will be cleared. If instead you don't use the HoC it will keep the state and worked as expected.

It looks like this is a limitation of the HMR implementation and not withRedux.

[jasondonnette]

I'm experiencing the same problems, all HOC's break hot-reloading.

Anyone know of a fix for this? @migueloller did you find anything?

Does Next.js use babel or webpack for HMR? I know there are some issues with webpack and HOC's with hot reloading.

[alexandregiordanelli]

Im facing the same problem!

[mikecardwell]

I'm suffering this exact same problem. Using any HOC on the page component disables HMR, even the Next.JS supplied withRouter HOC from 'next/router'.

[jadbox]

Even with the next-redux Counter example, the hot reload is broken with both 4.1.4 and 4.2.0-canary.1

[mikecardwell]

I've figured out a workaround when using the next-redux-wrapper HOC, documented at kirill-konshin/next-redux-wrapper#60 (comment)

It's not ideal, but this method might help to explain what the underlying problem/fix is, and may also be useful as a workaround for other HOCs

[timneutkens]

This was solved when we removed react-hot-loader