tj / frontend-boilerplate

webpack-react-redux-babel-autoprefixer-hmr-postcss-css-modules-rucksack-boilerplate (unmaintained, I don't use it anymore)

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Hot reloading reducers not supported?

shem86 opened this issue · comments

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?

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

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

I made a PR for this
#85