IonicServerModule: Cannot read property 'bind' of undefined

Ionic Framework
1

Hello,

I have encountered an error that I have not been able to resolve for a few days.

I just installed a new project
ionic start NewProject sidemenu --type angular

After install:

# update to Angular 11
ng update @angular/cli @angular/core rxjs
npm install @ionic/angular@latest @ionic/angular-toolkit@latest
ng add @angular-eslint/schematics

ng add @angular/pwa
ng add @nguniversal/express-engine
npm install @angular/animations
npm install @ionic/angular-server

When I launch the application everything works fine, but as soon as I add IonicServerModule in app.server.module.ts and I restart the application I have the following error message:

Cannot read property ‘bind’ of undefined at hydrateFactory (D:\www.…\dist\app\server\main.js:83524:36)

I also noticed that the console displays a warning which should not be displayed since we are on Ionic 5

[DEPRECATED][ion-menu] Using the [main] attribute is deprecated, please use the "contentId" property instead:
BEFORE:
  <ion-menu>...</ion-menu>
  <div main>...</div>

AFTER:
  <ion-menu contentId="main-content"></ion-menu>
  <div id="main-content">...</div>

I also upgraded all the other packages to the latest version, the result is the same. Has anyone ever encountered this problem?

Thanks for your help.

1 Like
2

Hi! My first post on this forum but I hope this will help you

We have two problems here with the Stencil. First it the warning message about deprecated [main] attribute. According to this issue: https://github.com/ionic-team/stencil/issues/2119

Just add additional attribute content-id with the same value as contentId attribute. Something like this:

<ion-menu contentId="main-content" content-id="main-content">...

The second problem is also connected with Stencil. It happens when you make SSR with Ionic v. >= 5.4.2. In this version they changed the Stencil dependency version from "@stencil/core": "1.17.3" to "@stencil/core": "2.1.2" and since this I see this error on the server side.

The problem is with 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);
...
}

I have found that the problem is with $stencilWindow.fetch which is undefined so when you comment this line:

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

your SSR app will start working and Ionic components are hydrated correctly.

Of course this is just temporary solution and it should be fixed in future - maybe I will send my first issue to Ionic repository with this.

I hope this will help you - it took me many hours of googling and reading other issues to understand what is wrong.

Greetings!

1 Like
3

Hello,

Thank you for your very comprehensive response.

Hope the Ionic team fixes the problem fairly quickly as it is very annoying.

About the outdated warning message i have the correct html code, with the correct attributes. I have the latest current version of Ionic and normally this warning did not appear from version 5. I hope all this will be resolved quickly. If you wish, you can create a ticket on Github.

Thank you again and have a nice day.

1 Like
4

For anyone interested - this issue is finally solved in Ionic Framework 5.6

1 Like