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

[rgolea]

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]

@mhartington please help me continue this issue here since the other issue was closed by author. Thank you very much for everything.

[liamdebeasi]

Looks like the issue is coming from here: https://github.com/ionic-team/ionic/blob/a5229d90ca2a608e8bf4db0c8f71c86d481dd649/core/src/utils/watch-options.ts#L1

[rgolea]

Thanks @liamdebeasi.

[liamdebeasi]

Can you try the following dev build and let me know if it resolves the issue?

npm i @ionic/[email protected]

[NikolaPeevski]

Hey @rgolea , Sorry but I don't recall Ionic having SSR-related stuff. Can you point them to me or can you explain me how did you integrate SSR into your project?

[rgolea]

@NikolaPeevski please check the example github project link I gave when opening the issue.

[rgolea]

@liamdebeasi will do! Thank you! Will get back to you as soon as possible.

[NikolaPeevski]

@rgolea I looked at it, just curious did you build the SSR yourself or did you follow a guide, my ssr looked way different, it had some handlings about mocking the browser on the backend.

[rgolea]

@NikolaPeevski not really. Just added IonicAngularServer and the SSR Express schematics.

[NikolaPeevski]

@rgolea Oh neat, the one I did was with native angular express engine. Lmk if this fixes the issue, I am also interested in SSR with ioonic.

[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.

[liamdebeasi]

@rgolea That looks like an SSR issue in Swiper not in Ionic. We are updating to Swiper 5 in an upcoming version of Ionic Framework, so the issue might be fixed there.

[rgolea]

@liamdebeasi will that happen soon? I will be happy to test.

Also, maybe swiper can get imported only if it’s not in prerender?

[liamdebeasi]

Hmm actually it looks like the dev I gave you already had Swiper 5 in it. Is your app using ion-slides at all, or is Swiper always getting imported?

[rgolea]

Swiper always gets imported. I do, however, have slides in my app. But it doesn't compile the test app I gave a link in the description of the issue because of it.

[rgolea]

@liamdebeasi what can I do to help?

[mhartington]

@rgolea You do not need to keep asking for updates every few days. We will post an update when we have more to share.

[rgolea]

I am so sorry @mhartington. I will try not to. Thanks a lot!

[liamdebeasi]

Thanks for the issue. The select issue has been resolved via https://github.com/ionic-team/ionic/pull/21068, and a fix will be available in an upcoming release of Ionic Framework.

@rgolea Can you open a separate issue, and I can investigate the slides issue more?

[rgolea]

Thanks @liamdebeasi. New issue is #21138.

[ionitron-bot[bot]]

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.