[v3b1] "Full reload needed" error
erikras opened this issue · comments
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.
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
.
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?
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.
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).
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.
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
beforeHotModuleReplacementPlugin
andNoErrorsPlugin
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 :/
I'll be taking a look next week.
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)
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 :)
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;
@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.
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 notifications@github.com
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
#307 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AB9zZ7iwk2e9CObhJK2XnGljKUoWF2kaks5qaC1FgaJpZM4IvZoe
.
@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.
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.