Repository navigation
bug: White screen on update to to Ionic 4.6.0 (<html> root element never receives 'hydrated' class) #18649
Description
Bug Report
Ionic version:
[x] 4.x
Current behavior:
The <html> root element never receives the <html class='hydrated'> hydrated class, preventing the application from appearing, even though the app is ready and running. Adding the hydrated class manually causes the app to appear and function normally.
The application builds normally in both dev and --prod modes without warnings or errors. No warnings or errors appears in the javascript console. I'm simply at a loss!
Expected behavior:
The hydrated class should be applied and the application should appear.
Steps to reproduce:
// update from Ionic 4.5.0 to 4.6.0 -- no other changes made to app.
rm -rf node_modules/
npm i -s @ionic/angular@4.6.0 @ionic/core@4.6.0
npm i
// Run application - white screen appears
Related code:
Not currently able to reproduce in a sample app. I'll keep trying but it's not feeling great :)
insert short code snippets here
Other information:
Ionic info:
Ionic:
Ionic CLI : 5.2.0 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.6.0
@angular-devkit/build-angular : 0.800.3
@angular-devkit/schematics : 7.3.1
@angular/cli : 8.0.3
@ionic/angular-toolkit : 1.5.1
Cordova:
Cordova CLI : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : not available
Cordova Plugins : not available
Utility:
cordova-res : not installed
native-run : not installed
System:
Android SDK Tools : 26.1.1 (/usr/local/share/android-sdk)
ios-deploy : 1.9.4
NodeJS : v12.3.1 (/usr/local/Cellar/node/12.3.1/bin/node)
npm : 6.9.0
OS : macOS Mojave
Xcode : Xcode 10.2.1 Build version 10E1001
Activity
lincolnthree commentedon Jun 27, 2019
Also tried updating @ionic/angular-toolkit@2.0.0 -- no luck.
liamdebeasi commentedon Jun 28, 2019
Hi there,
Thanks for the issue! Is this reproducible using one of the starters? If not, can you give me an idea of what I would need to do to reproduce this issue?
Thanks!
manucorporat commentedon Jun 28, 2019
are you using another stencil library other than ionic?
lincolnthree commentedon Jun 28, 2019
@liamdebeasi Not currently reproducible, and I have absolutely no idea what might be happening so not sure where to start.
@manucorporat Actually yes, I am using ionic-super-tabs... good thinking. Let me try removing that.
lincolnthree commentedon Jun 28, 2019
https://github.com/zyra/ionic-super-tabs
lincolnthree commentedon Jun 28, 2019
@manucorporat BINGO. Removing that does seem to get things loading. That's unfortunate. @ihadeed - Looks like an update might be necessary to move to Stencil One? I'm guessing that would be the fix.
ihadeed commentedon Jun 29, 2019
@lincolnthree I have a local branch with the Stencil One update ready, just needs some debug code cleanup. Will push/publish it soon.
brandyscarney commentedon Jul 1, 2019
I'm going to close this since it has been fixed in Stencil, please follow along on issue #18655 for updates on the hotfix release. 🙂
lincolnthree commentedon Jul 1, 2019
Thank you @brandyscarney !
timmyrosen commentedon Jul 3, 2019
I am having the exact same issue, but I don't have ionic-super-tabs in my project. Still my root html-element is missing the hydrated class and the screen is white.
This happened completely randomly, like it worked perfectly a week ago. It's hard to reproduce since it's an existing project but here is my ionic info:
Dependencies:
brandyscarney commentedon Jul 3, 2019
@timmyrosen Could you please try out the dev build and let me know if that fixes it?
npm i @ionic/angular@devQuentinFchx commentedon Jul 26, 2019
Hi there,
I've got the same issue when upgrading to
4.7(from^4.4)It seems that the
hydratedclass is not applied to thehtmlelement if no ionic custom elements are present on the page at init.I'll just override
html:not(.hydrated) body { display: none; }for now...My use-case:
I use
@angular/componentsand custom ones.I only use
@ionicfor theplatformandstorageservices and I pick a fewion-components which are displayed in very specific cases.brandyscarney commentedon Jul 26, 2019
@QuentinFchx Can you please create a new issue?
ionitron-bot commentedon Aug 25, 2019
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.