ionic-framework: bug: "cannot bind to undefined" error in SSR

Bug Report

Ionic version: [ ] 4.x [x] 5.x

Current behavior: When running the app with SSR you get error in the console window:

TypeError: Cannot read property 'bind' of undefined
    at hydrateFactory (...\dist\app\server\main.js:169296:36)
    at render (...\dist\app\server\main.js:196485:9)
    at ...\dist\app\server\main.js:196417:62
    at new ZoneAwarePromise (...\dist\app\server\main.js:441505:33)
    at hydrateDocument (...\dist\app\server\main.js:196409:33)
...

This error produce app in the SSR but without Ionic components hydrated into the code. This is visible when you disable JavaScript to test app.

Expected behavior: Application in the SSR should generate without this error and should have Ionic components hydrated even if JavaScript is disabled.

Steps to reproduce: Please run Ionic - Side-Menu or Tabs starter template app in SSR with latest ionic-angular (v. >= 5.4.2). Then start npm run dev:ssr. After that visit page at http://localhost:4200 you will get this error.

Related code: This error didn’t show in Ionic versions < 5.4.2. The problem is in the hydrateFactory function on the server side code and this cause the problem with rendering of the Ionic components. You may find this function in node_modules/@ionic/core/hydrate/index.js

function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResults, $stencilAfterHydrate, $stencilHydrateResolve) {
...
var fetch = $stencilWindow.fetch.bind($stencilWindow);
...
}

This error means that $stencilWindow.fetch is undefined.

Other information: The simple solution is to comment this line and the app in SSR start working as expected - Ionic components are hydrated without any problems with JavaScript disabled.

Ionic info:

Ionic:

   Ionic CLI                     : 6.12.3
   Ionic Framework               : @ionic/angular 5.5.2
   @angular-devkit/build-angular : 0.901.12
   @angular-devkit/schematics    : 9.1.12
   @angular/cli                  : 9.1.12
   @ionic/angular-toolkit        : 2.3.3

Cordova:

   Cordova CLI       : not installed
   Cordova Platforms : android 8.1.0, electron 2.0.0
   Cordova Plugins   : not available

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   Android SDK Tools : 26.1.1 (c:\Users\signu\AppData\Local\Android\android-sdk)
   NodeJS            : v14.15.3 (C:\Program Files\nodejs\node.exe)
   npm               : 6.14.9
   OS                : Windows 10

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 18 (4 by maintainers)

Most upvoted comments

We’ve isolated the issue and are just waiting to update a few deps. Will post when it is addressed.

@mhartington & @liamdebeasi Thank you very much for your efforts! Version 5.6 seems to solve this problem. I tested on my application and if no one objects to it, we can close this issue 😃

This will be part of the next minor release, 5.6.

@mhartington is it possible that this issue will also be fixed? At this moment we use SSR only for SEO-bots because of this page flickering - loading page for regular user takes longer time with SSR than without it and with this flickering SSR for regular user makes no sense. Thank you in advance for your answer.