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

lincolnthree · 2019-06-27T21:08:02Z

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

The text was updated successfully, but these errors were encountered:

lincolnthree · 2019-06-27T21:11:20Z

Also tried updating @ionic/angular-toolkit@2.0.0 -- no luck.

liamdebeasi · 2019-06-28T13:42:29Z

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 · 2019-06-28T13:49:32Z

are you using another stencil library other than ionic?

lincolnthree · 2019-06-28T13:57:00Z

@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 · 2019-06-28T13:57:28Z

https://github.com/zyra/ionic-super-tabs

lincolnthree · 2019-06-28T14:06:04Z

@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 · 2019-06-29T02:46:21Z

@lincolnthree I have a local branch with the Stencil One update ready, just needs some debug code cleanup. Will push/publish it soon.

brandyscarney · 2019-07-01T15:00:19Z

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 · 2019-07-01T16:35:38Z

Thank you @brandyscarney !

timmyrosen · 2019-07-03T14:20:13Z

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:

Ionic:

   Ionic CLI                     : 5.2.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.6.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.0.0, ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 14 other plugins)

Utility:

   cordova-res : 0.3.0 (update available: 0.5.1)
   native-run  : 0.2.3 (update available: 0.2.7)

System:

   ios-deploy : 1.9.4
   ios-sim    : 8.0.1
   NodeJS     : v12.1.0 (/usr/local/Cellar/node/12.1.0/bin/node)
   npm        : 6.9.0
   OS         : macOS Mojave
   Xcode      : Xcode 10.2.1 Build version 10E1001

Dependencies:

"dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
    "@bugsnag/core": "^6.2.0",
    "@bugsnag/js": "^6.2.0",
    "@bugsnag/plugin-angular": "^6.2.0",
    "@ionic-native/android-permissions": "^5.5.1",
    "@ionic-native/barcode-scanner": "^5.9.0",
    "@ionic-native/camera": "^5.5.1",
    "@ionic-native/contacts": "^5.5.1",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/deeplinks": "^5.5.1",
    "@ionic-native/device": "^5.5.1",
    "@ionic-native/facebook": "^5.5.1",
    "@ionic-native/file": "^5.5.1",
    "@ionic-native/file-path": "^5.5.1",
    "@ionic-native/firebase": "^5.5.1",
    "@ionic-native/google-analytics": "^5.5.1",
    "@ionic-native/in-app-browser": "^5.5.1",
    "@ionic-native/ionic-webview": "^5.5.1",
    "@ionic-native/keyboard": "^5.5.1",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.3.1",
    "@ionic/storage": "^2.2.0",
    "@ngxs-labs/async-storage-plugin": "0.0.1",
    "@ngxs/logger-plugin": "^3.4.3",
    "@ngxs/storage-plugin": "^3.4.3",
    "@ngxs/store": "^3.4.3",
    "cordova-android": "^8.0.0",
    "cordova-ios": "5.0.1",
    "cordova-plugin-add-swift-support": "^2.0.2",
    "cordova-plugin-android-permissions": "^1.0.0",
    "cordova-plugin-camera": "^4.0.3",
    "cordova-plugin-contacts": "^3.0.1",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-facebook4": "^4.2.1",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-filepath": "^1.5.4",
    "cordova-plugin-firebase": "git+https://github.com/dpa99c/cordova-plugin-firebase.git#GH-1057-April-05-android-build-issue",
    "cordova-plugin-google-analytics": "^1.8.6",
    "cordova-plugin-inappbrowser": "^3.0.0",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^4.0.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-sqlite-storage": "^3.2.0",
    "core-js": "^2.5.4",
    "ionic-plugin-deeplinks": "^1.0.19",
    "konva": "^3.2.5",
    "moment": "^2.24.0",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.29"
  },

brandyscarney · 2019-07-03T14:25:03Z

@timmyrosen Could you please try out the dev build and let me know if that fixes it? npm i @ionic/angular@dev

QuentinFchx · 2019-07-26T12:28:30Z

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.

brandyscarney · 2019-07-26T13:39:49Z

@QuentinFchx Can you please create a new issue?

ionitron-bot · 2019-08-25T13:54:47Z

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.

ionitron-bot bot added the triage label Jun 27, 2019

liamdebeasi added the needs: reply the issue needs a response from the user label Jun 28, 2019

ionitron-bot bot removed the triage label Jun 28, 2019

ionitron-bot bot added triage and removed needs: reply the issue needs a response from the user labels Jun 28, 2019

This was referenced Jun 28, 2019

bug: 4.6.0 missing scss files #18639

Closed

Ionic 4.6.0 Regressions #18655

Closed

brandyscarney closed this as completed Jul 1, 2019

QuentinFchx mentioned this issue Jul 26, 2019

bug: .hydrated class not being set on <html> if no ion- components are present #18914

Closed

ionitron-bot bot locked and limited conversation to collaborators Aug 25, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

lincolnthree commented Jun 27, 2019

lincolnthree commented Jun 27, 2019

liamdebeasi commented Jun 28, 2019

manucorporat commented Jun 28, 2019

lincolnthree commented Jun 28, 2019

lincolnthree commented Jun 28, 2019

lincolnthree commented Jun 28, 2019

ihadeed commented Jun 29, 2019

brandyscarney commented Jul 1, 2019

lincolnthree commented Jul 1, 2019

timmyrosen commented Jul 3, 2019

brandyscarney commented Jul 3, 2019

QuentinFchx commented Jul 26, 2019 •

edited

brandyscarney commented Jul 26, 2019

ionitron-bot bot commented Aug 25, 2019

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

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

Comments

lincolnthree commented Jun 27, 2019

Bug Report

lincolnthree commented Jun 27, 2019

liamdebeasi commented Jun 28, 2019

manucorporat commented Jun 28, 2019

lincolnthree commented Jun 28, 2019

lincolnthree commented Jun 28, 2019

lincolnthree commented Jun 28, 2019

ihadeed commented Jun 29, 2019

brandyscarney commented Jul 1, 2019

lincolnthree commented Jul 1, 2019

timmyrosen commented Jul 3, 2019

brandyscarney commented Jul 3, 2019

QuentinFchx commented Jul 26, 2019 • edited

brandyscarney commented Jul 26, 2019

ionitron-bot bot commented Aug 25, 2019

QuentinFchx commented Jul 26, 2019 •

edited