bug: Ionic / Angular Universal Prerender bugs on `MutationObserver`

Bug Report

Ionic version:

[x] 5.x

Current behavior:

The SSR prerender does not render properly. There is a problem with MutationObserver not existing on node and it’s being used inside the ion-select. Expected behavior:

It should allow to prerender the html files for the templates that contain ion-select to be prerendered. Steps to reproduce:

I got to reproduce this error by just adding a ion-select to the page. It happens when running npm run prerender directly from the @nguniversal/express-engine schematics and the template has an ion-select.

Related code:

A sample application via GitHub https://github.com/rgolea/ionic-ssr-errors

<ion-item>
  <ion-label>Hair Color</ion-label>
  <ion-select value="brown" okText="Okay" cancelText="Dismiss">
    <ion-select-option value="brown">Brown</ion-select-option>
    <ion-select-option value="blonde">Blonde</ion-select-option>
    <ion-select-option value="black">Black</ion-select-option>
    <ion-select-option value="red">Red</ion-select-option>
  </ion-select>
</ion-item>

Other information:

This is a continuation of the #21001 since the author closed it.

Ionic info:

Ionic:

   Ionic CLI : 6.6.0

Utility:

   cordova-res                          : not installed
   native-run (update available: 1.0.0) : 0.3.0

System:

   NodeJS : v13.12.0
   npm    : 6.14.4
   OS     : macOS Catalina

Errors:

Prerendering 1 route(s) to <path-to-project>/ionic-ssr-errors/dist/ionic-ssr-errors/browser
CREATE <path-to-project>/ionic-ssr-errors/dist/ionic-ssr-errors/browser/index.html (113368 bytes)
unhandledRejection ReferenceError: MutationObserver is not defined
    at <path-to-project>/ionic-ssr-errors/dist/ionic-ssr-errors/server/main.js:1:2789887
    at constructor.connectedCallback (<path-to-project>/ionic-ssr-errors/dist/ionic-ssr-errors/server/main.js:1:2790048)
    at safeCall (<path-to-project>/ionic-ssr-errors/dist/ionic-ssr-errors/server/main.js:1:2058830)
    at fireConnectedCallback (<path-to-project>/ionic-ssr-errors/dist/ionic-ssr-errors/server/main.js:1:2065851)
    at initializeComponent (<path-to-project>/ionic-ssr-errors/dist/ionic-ssr-errors/server/main.js:1:2065215)
    at connectedCallback (<path-to-project>/ionic-ssr-errors/dist/ionic-ssr-errors/server/main.js:1:2067599)
    at hydrateComponent (<path-to-project>/ionic-ssr-errors/dist/ionic-ssr-errors/server/main.js:1:2073412)
    at connectElement (<path-to-project>/ionic-ssr-errors/dist/ionic-ssr-errors/server/main.js:1:2073723)
    at Array.map (<anonymous>)
    at waitLoop (<path-to-project>/ionic-ssr-errors/dist/ionic-ssr-errors/server/main.js:1:2074636)

[rgolea]

Thanks @liamdebeasi. New issue is #21138.

[rgolea]

@liamdebeasi this build fixes that issue but a new one appears:

Prerendering 1 route(s) to <path-to-project>/dist/ionic-ssr-errors/browser
TypeError: Cannot read property 'width' of undefined
    at Device (<path-to-project>/dist/ionic-ssr-errors/server/main.js:1:3026748)
    at hydrateAppClosure (<path-to-project>/dist/ionic-ssr-errors/server/main.js:1:3028625)
    at hydrateFactory (<path-to-project>/dist/ionic-ssr-errors/server/main.js:1:3107878)
    at render (<path-to-project>/dist/ionic-ssr-errors/server/main.js:1:3128770)
    at <path-to-project>/dist/ionic-ssr-errors/server/main.js:1:3133854
    at new ZoneAwarePromise (<path-to-project>/dist/ionic-ssr-errors/server/main.js:1:3206236)
    at hydrateDocument (<path-to-project>/dist/ionic-ssr-errors/server/main.js:1:3133500)
    at <path-to-project>/dist/ionic-ssr-errors/server/main.js:1:1287139
    at <path-to-project>/dist/ionic-ssr-errors/server/main.js:1:1212014
    at ZoneDelegate.invoke (<path-to-project>/dist/ionic-ssr-errors/server/main.js:1:3194265)
CREATE <path-to-project>/dist/ionic-ssr-errors/browser/index.html (3471 bytes)

This seems to come from here: https://github.com/ionic-team/ionic/blob/6a167172ffa4802ff68b5ca0690586438f5ed744/core/src/components/slides/swiper/swiper.bundle.js#L2586

It doesn’t really make sense to me since it’s defined.