React-hot-loader: [v3b1] "Full reload needed" error

[erikras]

I must be fundamentally misunderstanding how this is supposed to work. I have pared down my app to the bare minimum and it is still refusing to reload my component. My best guess is that either react-router or react-redux is breaking the chain of knowledge of how to reload somehow.

I have created a repo demonstrating my problem.

https://github.com/erikras/react-hot-loader-problem

Update: I have removed react-router and react-redux from the project and it still happens. My config must be broken.

Any help would be most appreciated. Cheers.

[rosskevin]

You don't need redbox, it is already integrated in the beta. Change your index to look like this: https://github.com/gaearon/react-hot-boilerplate/tree/next/src

Routes

A note on routes (I'm debugging as we speak): even without async routes, you will get router reload errors if your router is in the <App/> but hot reload works.

The recommendation was to move my routes to be imported in the index.js and pass down {routes, history} as props. This _appears_ to cause the Full Reload needed.

[erikras]

I have updated my repo to not have Redbox, and to use AppContainer, which was was not using, and now I really cannot see the difference between my app and the one in react-hot-boilerplate, but mine is not working, and RHB is.

Any further ideas?

[erikras]

Oh! I'm using webpack-dev-middleware and webpack-hot-middleware and the RHB example is using webpack-dev-server. That's about the only difference I can still see.

[rosskevin]

Since yours is an example, I would delete your code, paste in the working boilerplate, and use sourcetree to diff the entire thing. Move your code back a little at a time, testing to be sure hot reload works (until it doesn't).

[gaearon]

Oh! I'm using webpack-dev-middleware and webpack-hot-middleware and the RHB example is using webpack-dev-server. That's about the only difference I can still see.

This should be irrelevant, RHL doesn’t care about the transport.

[romulof]

According to _webpack-hot-middleware_ docs:

• You don't need to add webpack/hot/only-dev-server entry in your Webpack configuration.
• You forgot to add OccurenceOrderPlugin before HotModuleReplacementPlugin and NoErrorsPlugin after it.

You also forgot to add react-hot-loader/babel plugin in your Babel configuration.

I've made all these changes and sill got the same error as you :/

[gaearon]

I'll be taking a look next week.

[romulof]

UPDATE: The problem here was with my Babel configuration.

I had all my Babel config at package.json and was setting the react-hot-loader/babel plugin in babel-loader Webpack query. I forgot that the configs are not merged.

Now the error is another:

[HMR] Cannot check for update (Full reload needed)
process-update.js:116
[HMR] Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at invariant (http://0.0.0.0:3000/dist/client.js:641:16)
    at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (http://0.0.0.0:3000/dist/client.js:19122:103)
    at ReactCompositeComponentWrapper._updateRenderedComponent (http://0.0.0.0:3000/dist/client.js:55684:39)
    at ReactCompositeComponentWrapper._performComponentUpdate (http://0.0.0.0:3000/dist/client.js:55656:11)
    at ReactCompositeComponentWrapper.updateComponent (http://0.0.0.0:3000/dist/client.js:55575:13)
    at ReactCompositeComponentWrapper.receiveComponent (http://0.0.0.0:3000/dist/client.js:55474:11)
    at Object.receiveComponent (http://0.0.0.0:3000/dist/client.js:4380:23)
    at ReactCompositeComponentWrapper._updateRenderedComponent (http://0.0.0.0:3000/dist/client.js:55678:24)
    at ReactCompositeComponentWrapper._performComponentUpdate (http://0.0.0.0:3000/dist/client.js:55656:11)
    at ReactCompositeComponentWrapper.updateComponent (http://0.0.0.0:3000/dist/client.js:55575:13)

[romulof]

UPDATE 2: I fixed it.

The problem was with my module.hot.accept reloads. I forgot to add .default after the _required_ modules.

Thanks @erikras, you served as my Debug Rubber Duck today :)

[NeXTs]

@romulof Great catch! I had same issue

[paulwithap]

I'm experiencing this issue as well while using webpack-dev-middleware and webpack-hot-middleware. I know @gaearon said it shouldn't matter, but someone _did_ submit a PR to @erikras where the fix was literally just swapping Express with webpack-dev-server 😄

webpack.config.js

...
 entry: [
    'react-hot-loader/patch',
    'webpack-hot-middleware/client',
    './src/index'
  ],
  target: 'web',
  output: {
    path: `${__dirname}/src`,
    publicPath: 'http://localhost:3000/',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development'),
      __DEV__: true
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
...

src/index.js

...
render(
  <AppContainer>
    <Root store={store} history={history} routes={routes} />
  </AppContainer>, rootEl
);

if (module.hot) {
  module.hot.accept('./containers/Root', () => {
    const NextRoot = require('./containers/Root').default; // eslint-disable-line global-require
    render(
      <AppContainer>
        <NextRoot store={store} history={history} routes={routes} />
      </AppContainer>, rootEl
    );
  });
}
...

src/containers/Root.js

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

...

export default Root;

[romulof]

@paulwithap, your JS code have go thru either react-hot-loader/babel Babel Plugin _OR_ react-hot-loader/webpack Webpack Loader, if you are not using Babel.

[paulwithap]

That's in my .babelrc file. I've tried putting the configuration directly
in my webpack config as well. Neither worked.

On Wednesday, July 27, 2016, Rômulo Fernandes [email protected]
wrote:

@paulwithap https://github.com/paulwithap, your JS code have go thru
either react-hot-loader/babel Babel Plugin _OR_ react-hot-loader/webpack
Webpack Loader, if you are not using Babel.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/gaearon/react-hot-loader/issues/307#issuecomment-235796832,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AB9zZ7iwk2e9CObhJK2XnGljKUoWF2kaks5qaC1FgaJpZM4IvZoe
.

[paulwithap]

@gaearon was right of course 😁

The fix in my case was related to react-router. Passing routes in as a prop to <Root /> breaks HMR, but importing them directly into Root.js works.

Any idea why? Routing was working as expected in the former version, and I assumed the output either way would be the same.

[calesce]

I was able to check out @erikras's repo, updated to 3.0.0-beta.3, and run it/hot reload without any other changes.