search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.13k stars 13.51k forks source link

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

Closed ilprima closed 4 years ago

ilprima commented 4 years ago

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[bot] commented 4 years ago

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 commented 4 years ago

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 https://github.com/ionic-team/stencil-ds-output-targets/issues/56 ?

liamdebeasi commented 4 years ago

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!