bug: Ionic SSR: ERROR TypeError: Cannot redefine property: constructor

[ilprima]

Please check this Error shown here on StackOverflow: https://stackoverflow.com/questions/63260694/ionic-with-ssr-implementation/63669265#63669265

I can add a recap here:

Adding Ionic SSR to the project is, the SSR server when running shows "cannot access self of undefined", the same for document and window.

Adding this piece of code in the server.ts file, as shown in some threads:

const domino = require('domino');

const templateA = readFileSync(join(distFolder, indexTemplate)).toString();
const win = domino.createWindow(templateA);
(win as any).Object = Object;
(win as any).Math = Math;
global['self'] = win; //TODO: Is giving ERROR TypeError: Cannot redefine property: constructor at Function.defineProperty
global['window'] = win;
global['win'] = win;
global['branch'] = null;

It shows another error: ERROR TypeError: Cannot redefine property: constructor

Ionic version:
Ionic 5.4.16

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.16
   Ionic Framework               : @ionic/angular 5.3.2
   @angular-devkit/build-angular : 0.1000.6
   @angular-devkit/schematics    : 10.0.6
   @angular/cli                  : 10.0.6
   @ionic/angular-toolkit        : 2.3.3

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : browser 5.0.4
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 8 other plugins)

Utility:

   cordova-res                          : not installed
   native-run (update available: 1.0.0) : 0.2.8

System:

   ios-deploy : 1.9.4
   ios-sim    : 8.0.0
   NodeJS     : v12.18.3 (/usr/local/bin/node)
   npm        : 6.14.6
   OS         : macOS Catalina
   Xcode      : Xcode 11.6 Build version 11E708

My dependencies:

"dependencies": {
    "@agm/core": "^1.1.0",
    "@agm/js-marker-clusterer": "^1.1.0",
    "@angular/animations": "^10.0.10",
    "@angular/cdk": "^10.1.3",
    "@angular/common": "^10.0.10",
    "@angular/core": "^10.0.10",
    "@angular/forms": "^10.0.10",
    "@angular/platform-browser": "^10.0.10",
    "@angular/platform-browser-dynamic": "^10.0.10",
    "@angular/platform-server": "^10.0.10",
    "@angular/router": "^10.0.10",
    "@angular/service-worker": "^10.0.10",
    "@auth0/angular-jwt": "^5.0.1",
    "@ionic-native/android-permissions": "^5.25.0",
    "@ionic-native/core": "^5.25.0",
    "@ionic-native/geolocation": "^5.25.0",
    "@ionic-native/image-picker": "^5.25.0",
    "@ionic-native/ionic-webview": "^5.25.0",
    "@ionic-native/keyboard": "^5.25.0",
    "@ionic-native/native-geocoder": "^5.28.0",
    "@ionic-native/paypal": "^5.25.0",
    "@ionic-native/splash-screen": "^5.25.0",
    "@ionic/angular": "^5.3.2",
    "@ionic/angular-server": "5.3.2",
    "@ng-toolkit/universal": "^8.1.0",
    "@nguniversal/express-engine": "^10.0.2",
    "@ngx-translate/core": "^12.1.2",
    "@ngx-translate/http-loader": "6.0.0",
    "acorn": "^7.3.1",
    "angularx-social-login": "^2.3.1",
    "animate.css": "^4.1.0",
    "chart.js": "^2.9.3",
    "cordova-browser": "6.0.0",
    "cordova-plugin-actionsheet": "^2.3.3",
    "cordova-plugin-add-swift-support": "^2.0.2",
    "cordova-plugin-android-permissions": "^1.0.2",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-geolocation": "^4.0.2",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.2.1",
    "cordova-plugin-nativegeocoder": "^3.4.1",
    "cordova-plugin-splashscreen": "^5.0.4",
    "cordova-plugin-telerik-imagepicker": "^2.3.3",
    "cordova-plugin-whitelist": "^1.3.4",
    "domino": "^2.1.6",
    "easy-pie-chart": "^2.1.7",
    "express": "^4.17.1",
    "hammerjs": "^2.0.8",
    "ionic": "^5.4.16",
    "ionic2-calendar": "0.5.10",
    "jquery": "^3.4.1",
    "js-marker-clusterer": "^1.0.0",
    "memory-cache": "^0.2.0",
    "ng-lazyload-image": "^7.1.0",
    "ngx-paypal": "^6.1.0",
    "ngx-pinch-zoom": "^2.4.4",
    "ngx-quicklink": "^0.2.4",
    "openvidu-browser": "2.15.0",
    "pinch-zoom-js": "^2.3.4",
    "rxjs": "6.6.2",
    "screenfull": "^5.0.2",
    "socket.io": "^2.3.0",
    "zone.js": "^0.11.1"
  },

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please provide a reproduction with the minimum amount of code required to reproduce the issue. Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

For a guide on how to create a good reproduction, see our Contributing Guide.

[fobaz]

I am having the same error with current versions.
However, upon refresh this error appears:
ERROR Error: Uncaught (in promise): TypeError: head.querySelector is not a function TypeError: head.querySelector is not a function at bootstrapLazy (...\dist\app\server\main.js:128638:44) at ...\dist\app\server\main.js:85141:64 at ZoneDelegate.invoke (...\dist\app\server\main.js:78066:30) at Object.onInvoke (...\dist\app\server\main.js:118579:33) at ZoneDelegate.invoke (...\dist\app\server\main.js:78065:56) at Zone.run (...\dist\app\server\main.js:77828:47) at ...\dist\app\server\main.js:78898:40

Could it possibly be related to this issue stenciljs/output-targets#56 ?

[liamdebeasi]

Thanks for the issue! This issue is being closed due to the lack of a code reproduction. 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.

Thank you for using Ionic!