tj / frontend-boilerplate

webpack-react-redux-babel-autoprefixer-hmr-postcss-css-modules-rucksack-boilerplate (unmaintained, I don't use it anymore)
2.93k stars 268 forks source link

Hot reloading reducers not supported? #72

Closed shem86 closed 8 years ago

shem86 commented 8 years ago

Hi, I'm changing todos 'add todo' reducer to set completed to true on creation and I get:

[HMR] Cannot apply update. Need to do a full reload! dev-server.js:19 [HMR] Error: Expected the reducer to be a function. Instead got an object with a "default" field. Did you pass a module instead of the default export? Try passing require(...).default instead.

Tested on unmodified Todo app, Any ideas?

tj commented 8 years ago

not sure, I've removed HMR from my apps entirely, seems buggy and I don't have the time to fix that stuff

shem86 commented 8 years ago

Seems like adding .default to require call for reducers on webpack HMR fixes it.

if (module.hot) {
    module.hot.accept('../reducers', () => {
      const nextReducer = require('../reducers').default
      store.replaceReducer(nextReducer)
    })
  }

Note that when using require if you want the default export you need to manually grab it through .default. Reason for this is require doesn’t handle both default and normal exports so you have to specify which to return. Whereas import has a system for this in place so it knows already (eg. import foo from 'bar') vs import {baz} from 'bar').

Taken from webpack-your-bags

alanrsoares commented 8 years ago

https://github.com/gaearon/react-hot-boilerplate/pull/61

zirho commented 8 years ago

I made a PR for this

85