ionic-framework: bug: Ionic / Angular Universal Prerender bugs on slides

Bug Report

Ionic version:

[x] 5.x

Current behavior:

The SSR prerender does not render properly. There is a problem when importing slider.js. It seems that the screen object is not defined. Expected behavior:

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

It happens when running npm run prerender directly from the @nguniversal/express-engine schematics and the template has an ion-slides.

Related code:

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

Other information:

This is a continuation of the #21063 since the original issue was fixed.

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>/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)

The error seems to come from here: https://github.com/ionic-team/ionic/blob/6a167172ffa4802ff68b5ca0690586438f5ed744/core/src/components/slides/swiper/swiper.bundle.js#L2586 The thing is that it seems to be defined: ScreenShot

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 1
Comments: 27 (6 by maintainers)

Most upvoted comments

@liamdebeasi swiper has updated to the latest version. I will test tomorrow and confirm it works.

rgolea on May 16, 2020

Yeah, I think you are correct – ssr-window is a dependency of swiper: https://github.com/nolimits4web/swiper/blob/master/package.json#L77. Not sure what the dev’s release process is, but we’ll get the fix into Ionic one way or another.

liamdebeasi on May 7, 2020

The author released 2.0.0 stable 2 days ago. Just need to wait for Swiper to get updated with the ssr-window dependency, and I will update Ionic.

In the meantime, I created a dev build of Ionic with a custom build of Swiper. This build has Ionic Framework v5.1.1 and Swiper 5.3.8 + ssr-window 2.0.0.

Here is a dev build if anyone would like to test: npm i @ionic/angular@5.2.0-dev.202005141344.39bfaea

I tested this using the repo in the original post, and it seems like this fixes the issue.

I confirm that this fixes the issue. In addition, ion-menu problem on angular universal is also fixed… Now waiting this version to be released… Thanks.

kotuadam on May 29, 2020

Thank you @liamdebeasi. Any time! Hope it helps others as well!

rgolea on May 20, 2020

@liamdebeasi I will check with him.

rgolea on May 18, 2020

The author released 2.0.0 stable 2 days ago. Just need to wait for Swiper to get updated with the ssr-window dependency, and I will update Ionic.

In the meantime, I created a dev build of Ionic with a custom build of Swiper. This build has Ionic Framework v5.1.1 and Swiper 5.3.8 + ssr-window 2.0.0.

Here is a dev build if anyone would like to test: npm i @ionic/angular@5.2.0-dev.202005141344.39bfaea

I tested this using the repo in the original post, and it seems like this fixes the issue.

liamdebeasi on May 14, 2020

Hey guys! The PR has merged with some extra features. If you want to, please try over the weekend the following: https://www.npmjs.com/package/ssr-window/v/2.0.0-beta.6 I will try it myself too.

rgolea on May 8, 2020

@liamdebeasi @NikolaPeevski Okay, so… I found the issue. The swiper.js library uses ssr-window as a dependency. This library uses the window object or the one simulated by them. Somewhere along the angular universal module, or maybe ionic server, or somewhere along the builds, before getting to the swiper bundle, there is a window object that gets injected but does not have window.screen. Since the library only checks that the objects exists, it doesn’t add properties that need to exist in order to make swiper.js work. That is why I’m adding to the global window all parts that do not exist.

Please check out this PR#4 and, if you can, please encourage the team to merge it so this issue can be solved.

rgolea on May 5, 2020