Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: White screen on update to to Ionic 4.6.0 (<html> root element never receives 'hydrated' class)

See original GitHub issue

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

Issue Analytics

State:
Created 4 years ago
Comments:14 (6 by maintainers)

Top GitHub Comments

1reaction

brandyscarneycommented, Jul 26, 2019

@QuentinFchx Can you please create a new issue?

1reaction

QuentinFchxcommented, Jul 26, 2019

Hi there,

I’ve got the same issue when upgrading to 4.7 (from ^4.4)

It seems that the hydrated class is not applied to the html element 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/components and custom ones. I only use @ionic for the platform and storage services and I pick a few ion- components which are displayed in very specific cases.