-
-
Notifications
You must be signed in to change notification settings - Fork 381
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Hydration of app in 5.13.0 #587
Comments
Hey @yashok111 👋, |
Why do you think it renders twice? |
I can confirm this is occurring in my app too (with If I have seen such double ups in DOM elements when hydrate() has an SSR mismatch. Usually an error is shown, but with the production env these comments are stripped out. |
@clgeoio thank you for your suggestion. I have downgraded the |
Good to hear. |
That's very interesting. Sounds like some problems with hydration resulting a broken state - that's possible if generated HTML does not match. The other problem is that not matching babel version should not work as expected - some logic there got completely reversed. |
Actually babel-plugin could be downgraded without any consequences, however that will nullify a few fixes made in between. Anyway - look like everything is about this line - https://github.com/gregberge/loadable-components/blob/master/packages/component/src/createLoadable.js#L108 Could you try to find it in your own code and add some logging around - I am interested in difference between 12 and 13 version in terms of what it will |
5.13: console.log('test');
console.log('options.ssr !== false ===> ', options.ssr !== false);
console.log('ctor.isReady && ctor.isReady(props) ===> ', ctor.isReady, ctor.isReady(props));
console.log('ctor.chunkName && LOADABLE_SHARED.initialChunks[ctor.chunkName(props)]) ===> ', ctor.chunkName, LOADABLE_SHARED.initialChunks[ctor.chunkName(props)])
console.log(options.ssr !== false && ( // is ready - was loaded in this session
ctor.isReady && ctor.isReady(props) || // is ready - was loaded during SSR process
ctor.chunkName && LOADABLE_SHARED.initialChunks[ctor.chunkName(props)]))
if (options.ssr !== false && ( // is ready - was loaded in this session
ctor.isReady && ctor.isReady(props) || // is ready - was loaded during SSR process
ctor.chunkName && LOADABLE_SHARED.initialChunks[ctor.chunkName(props)])) {
console.log('loadSync');
_this.loadSync();
}
return _this; looks like condition is always 5.12: console.log('test');
console.log('options.ssr !== false ===> ', options.ssr !== false);
console.log('ctor.isReady ===> ', ctor.isReady);
console.log('ctor.isReady(props) ===> ', ctor.isReady(props));
if (options.ssr !== false && ctor.isReady && ctor.isReady(props)) {
console.log('loadSync')
_this.loadSync();
}
return _this; |
Ok. In this case please try to find the difference between server output and result of |
@yashok111 yep, it all should be |
oof... |
Recovery plan:
|
Same problem for sample app https://github.com/gregberge/loadable-components/tree/master/examples/server-side-rendering |
client+server 5.13.1 should fix the problem. |
It would be awesome if someone will confirm that the issue got resolved. |
The issue is resolved. Thank you @theKashey for fast hotfix! |
I'm still getting this error in |
🐛 Bug Report
I just updated to the latest version of loadable-components in my project. On server app renders exactly as expected. When hydration is complete it looks like the app rendered two times. Issues happen only with ReactDOM.hydrate, if I just ReactDOM.render the app everything works as expected. On 5.12.0 hydrate works perfectly.
To Reproduce
I have tried to create a small repo but everything seems to work fine in it
Expected behavior
Same HTML on the server and on the client.
Link to repl or repo (highly encouraged)
See "To Reproduce".
Run
npx envinfo --system --binaries --npmPackages @loadable/component,@loadable/server,@loadable/webpack-plugin,@loadable/babel-plugin --markdown --clipboard
Paste the results here:
The text was updated successfully, but these errors were encountered: