ionic-framework: 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)
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 21 (6 by maintainers)
Thanks @liamdebeasi. New issue is #21138.
@liamdebeasi this build fixes that issue but a new one appears:
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.