search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.15k stars 13.5k forks source link

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

Closed lincolnthree closed 5 years ago

lincolnthree commented 5 years ago

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
lincolnthree commented 5 years ago

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

liamdebeasi commented 5 years ago

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 commented 5 years ago

are you using another stencil library other than ionic?

lincolnthree commented 5 years ago

@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 commented 5 years ago

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

lincolnthree commented 5 years ago

@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 commented 5 years ago

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

brandyscarney commented 5 years ago

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 commented 5 years ago

Thank you @brandyscarney !

timmyrosen commented 5 years ago

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 commented 5 years ago

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

QuentinFchx commented 5 years ago

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 commented 5 years ago

@QuentinFchx Can you please create a new issue?

ionitron-bot[bot] commented 5 years ago

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.