bug: Ionic 6 / Angular 14 / SSR - TypeError: Cannot redefine property: constructor

[sgcharan]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

Hi! Am trying to add SSR to my app. When trying to serve using npm run serve:ssr , I was experiencing list of errors for window and self properties. After which I added, domino and assigned window and self variables as defined in this older bug - #21001. In fact this older also mentions about the error I am seeing now on my repo - https://github.com/sgcharan/TradAssistUI/tree/ssr.

TypeError: Cannot redefine property: constructor
at Function.defineProperty ()
at C:\Users\sgcha\MyProjects\TradAssist\trad-assist-ui\dist\app\server\polyfills-dom.js:1:8856
at xa (C:\Users\sgcha\MyProjects\TradAssist\trad-assist-ui\dist\app\server\polyfills-dom.js:1:8952)
at Window. (C:\Users\sgcha\MyProjects\TradAssist\trad-assist-ui\dist\app\server\polyfills-dom.js:1:16246)
at Object.9833 (C:\Users\sgcha\MyProjects\TradAssist\trad-assist-ui\dist\app\server\polyfills-dom.js:1:16475)
at webpack_require (C:\Users\sgcha\MyProjects\TradAssist\trad-assist-ui\dist\app\server\main.js:1:5163844)
at Function.webpack_require.t (C:\Users\sgcha\MyProjects\TradAssist\trad-assist-ui\dist\app\server\main.js:1:5164183)
at _ZoneDelegate2.invoke (C:\Users\sgcha\MyProjects\TradAssist\trad-assist-ui\dist\app\server\main.js:1:3574934)
at Object.onInvoke (C:\Users\sgcha\MyProjects\TradAssist\trad-assist-ui\dist\app\server\main.js:1:4147282)
at _ZoneDelegate2.invoke (C:\Users\sgcha\MyProjects\TradAssist\trad-assist-ui\dist\app\server\main.js:1:3574830)

Expected Behavior

Expecting my app to load fine without the errors from main.js / polyfills js

Steps to Reproduce

code base causing issue - https://github.com/sgcharan/TradAssistUI/tree/ssr

Code Reproduction URL

No response

Ionic Info

ionic info
[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package'

   Require stack:
   - C:\Users\sgcha\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
   - C:\Users\sgcha\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
   - C:\Users\sgcha\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
   - C:\Users\sgcha\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic

Ionic:

Ionic CLI : 6.20.1 (C:\Users\sgcha\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 6.2.8
@angular-devkit/build-angular : 14.2.3
@angular-devkit/schematics : 14.2.3
@angular/cli : 14.2.3
@ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 4.2.0
@capacitor/android : 4.2.0
@capacitor/core : 4.2.0
@capacitor/ios : not installed

Utility:

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

System:

NodeJS : v16.15.0 (C:\Program Files\nodejs\node.exe)
npm : 8.5.5
OS : Windows 10

Additional Information

No response

[liamdebeasi]

Thanks for the report. The error appears to be coming from the polyfills-dom.js file, not Ionic. Are you able to identify an Ionic-related part of your application that could be causing this?

[sgcharan]

The file itself seems to be from ./node_modules/@ionic/core/dist/esm/polyfills/dom.js
Code is from Polymer.js

[**"./node_modules/@ionic/core/dist/esm/polyfills/dom.js"**],"sourcesContent":["(function(){\n /*\n Copyright (c) 2016 The Polymer Project Authors. All rights reserved.\n **This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt**\n The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt\n The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt\n Code distributed by Google as part of the polymer project is also\n subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt\n */\n 'use strict';var aa=new Set(\"annotation-xml color-profile font-face font-face-src font-face-uri font-face-format font-face-name missing-glyph\".split(\" \"));function g(a){var b=aa.has(a);a=/^[a-z][.0-9_a-z]*-[\\-.0-9_a-z]*$/.test(a);return!b&&a}function l(a){var b=a.isConnected;if(void 0!==b)return b;for(;a&&!(a.__CE_isImportDocument||a instanceof Document);)a=a.parentNode||(window.ShadowRoot&&a instanceof ShadowRoot?a.host:void 0);return!(!a||!(a.__CE_isImportDocument||a instanceof Document))}\n function n(a,b){for(;b&&b!==a&&!b.nextSibling;)b=b.parentNode;return b&&b!==a?b.nextSibling:null}\n function p(a,b,d){d=void 0===d?new Set:d;for(var c=a;c;){if(c.nodeType===Node.ELEMENT_NODE){var e=c;b(e);var f=e.localName;if(\"link\"===f&&\"import\"===e.getAttribute(\"rel\")){c=e.import;if(c instanceof Node&&!d.has(c))for(d.add(c),c=c.firstChild;c;c=c.nextSibling)p(c,b,d);c=n(a,e);continue}else if(\"template\"===f){c=n(a,e);continue}if(e=e.__CE_shadowRoot)for(e=e.firstChild;e;e=e.nextSibling)p(e,b,d)}c=c.firstChild?c.firstChild:n(a,c)}}function r(a,b,d){a[b]=d};function u(){this.a=new Map;this.g=new Map;this.c=[];this.f=[];this.b=!1}function ba(a,b,d){a.a.set(b,d);a.g.set(d.constructorFunction,d)}function ca(a,b){a.b=!0;a.c.push(b)}function da(a,b){a.b=!0;a.f.push(b)}function v(a,b){a.b&&p(b,function(b){return w(a,b)})}function w(a,b){if(a.b&&!b.__CE_patched){b.__CE_patched=!0;for(var d=0;d<a.c.length;d++)a.c[d](b);for(d=0;d<a.f.length;d++)a.f[d](b)}}\n function x(a,b){var d=[];p(b,function(b){return d.push(b)});for(b=0;b<d.length;b++){var c=d[b];1===c.__CE_state?a.connectedCallback(c):y(a,c)}}function z(a,b){var d=[];p(b,function(b){return d.push(b)});for(b=0;b<d.length;b++){var c=d[b];1===c.__CE_state&&a.disconnectedCallback(c)}}\n function A(a,b,d){d=void 0===d?{}:d;var c=d.u||new Set,e=d.i||function(b){return y(a,b)},f=[];p(b,function(b){if(\"link\"===b.localName&&\"import\"===b.getAttribute(\"rel\")){var d=b.import;d instanceof Node&&(d.__CE_isImportDocument=!0,d.__CE_hasRegistry=!0);d&&\"complete\"===d.readyState?d.__CE_documentLoadHandled=!0:b.addEventListener(\"load\",function(){var d=b.import;if(!d.__CE_documentLoadHandled){d.__CE_documentLoadHandled=!0;var f=new Set(c);f.delete(d);A(a,d,{u:f,i:e})}})}else f.push(b)},c);if(a.b)for(b=\n 0;b<f.length;b++)w(a,f[b]);for(b=0;b<f.length;b++)e(f[b])}\n function y(a,b){if(void 0===b.__CE_state){var d=b.ownerDocument;if(d.defaultView||d.__CE_isImportDocument&&d.__CE_hasRegistry)if(d=a.a.get(b.localName)){d.constructionStack.push(b);var c=d.constructorFunction;try{try{if(new c!==b)throw Error(\"The custom element constructor did not produce the element being upgraded.\");}finally{d.constructionStack.pop()}}catch(t){throw b.__CE_state=2,t;}b.__CE_state=1;b.__CE_definition=d;if(d.attributeChangedCallback)for(d=d.observedAttributes,c=0;c<d.length;c++){var e=\n d[c],f=b.getAttribute(e);null!==f&&a.attributeChangedCallback(b,e,null,f,null)}l(b)&&a.connectedCallback(b)}}}u.prototype.connectedCallback=function(a){var b=a.__CE_definition;b.connectedCallback&&b.connectedCallback.call(a)};u.prototype.disconnectedCallback=function(a){var b=a.__CE_definition;b.disconnectedCallback&&b.disconnectedCallback.call(a)};\n u.prototype.attributeChangedCallback=function(a,b,d,c,e){var f=a.__CE_definition;f.attributeChangedCallback&&-1<f.observedAttributes.indexOf(b)&&f.attributeChangedCallback.call(a,b,d,c,e)};function B(a){var b=document;this.c=a;this.a=b;this.b=void 0;A(this.c,this.a);\"loading\"===this.a.readyState&&(this.b=new MutationObserver(this.f.bind(this)),this.b.observe(this.a,{childList:!0,subtree:!0}))}function C(a){a.b&&a.b.disconnect()}B.prototype.f=function(a){var b=this.a.readyState;\"interactive\"!==b&&\"complete\"!==b||C(this);for(b=0;b<a.length;b++)for(var d=a[b].addedNodes,c=0;c<d.length;c++)A(this.c,d[c])};function ea(){var a=this;this.b=this.a=void 0;this.c=new Promise(function(b){a.b=b;a.a&&b(a.a)})}function D(a){if(a.a)throw Error(\"Already resolved.\");a.a=void 0;a.b&&a.b(void 0)};function E(a){this.c=!1;this.a=a;this.j=new Map;this.f=function(b){return b()};this.b=!1;this.g=[];this.o=new B(a)}\n E.prototype.l=function(a,b){var d=this;if(!(b instanceof Function))throw new TypeError(\"Custom element constructors must be functions.\");if(!g(a))throw new SyntaxError(\"The element name '\"+a+\"' is not valid.\");if(this.a.a.get(a))throw Error(\"A custom element with name '\"+a+\"' has already been defined.\");if(this.c)throw Error(\"A custom element is already being defined.\");this.c=!0;try{var c=function(b){var a=e[b];if(void 0!==a&&!(a instanceof Function))throw Error(\"The '\"+b+\"' callback must be a function.\");\n return a},e=b.prototype;if(!(e instanceof Object))throw new TypeError(\"The custom element constructor's prototype is not an object.\");var f=c(\"connectedCallback\");var t=c(\"disconnectedCallback\");var k=c(\"adoptedCallback\");var h=c(\"attributeChangedCallback\");var m=b.observedAttributes||[]}catch(q){return}finally{this.c=!1}b={localName:a,constructorFunction:b,connectedCallback:f,disconnectedCallback:t,adoptedCallback:k,attributeChangedCallback:h,observedAttributes:m,constructionStack:[]};ba(this.a,\n a,b);this.g.push(b);this.b||(this.b=!0,this.f(function(){return fa(d)}))};E.prototype.i=function(a){A(this.a,a)};\n function fa(a){if(!1!==a.b){a.b=!1;for(var b=a.g,d=[],c=new Map,e=0;e<b.length;e++)c.set(b[e].localName,[]);A(a.a,document,{i:function(b){if(void 0===b.__CE_state){var e=b.localName,f=c.get(e);f?f.push(b):a.a.a.get(e)&&d.push(b)}}});for(e=0;e<d.length;e++)y(a.a,d[e]);for(;0<b.length;){var f=b.shift();e=f.localName;f=c.get(f.localName);for(var t=0;t<f.length;t++)y(a.a,f[t]);(e=a.j.get(e))&&D(e)}}}E.prototype.get=function(a){if(a=this.a.a.get(a))return a.constructorFunction};\n E.prototype.m=function(a){if(!g(a))return Promise.reject(new SyntaxError(\"'\"+a+\"' is not a valid custom element name.\"));var b=this.j.get(a);if(b)return b.c;b=new ea;this.j.set(a,b);this.a.a.get(a)&&!this.g.some(function(b){return b.localName===a})&&D(b);return b.c};E.prototype.s=function(a){C(this.o);var b=this.f;this.f=function(d){return a(function(){return b(d)})}};window.CustomElementRegistry=E;E.prototype.define=E.prototype.l;E.prototype.upgrade=E.prototype.i;E.prototype.get=E.prototype.get;\n E.prototype.whenDefined=E.prototype.m;E.prototype.polyfillWrapFlushCallback=E.prototype.s;var F=window.Document.prototype.createElement,G=window.Document.prototype.createElementNS,ha=window.Document.prototype.importNode,ia=window.Document.prototype.prepend,ja=window.Document.prototype.append,ka=window.DocumentFragment.prototype.prepend,la=window.DocumentFragment.prototype.append,H=window.Node.prototype.cloneNode,I=window.Node.prototype.appendChild,J=window.Node.prototype.insertBefore,K=window.Node.prototype.removeChild,L=window.Node.prototype.replaceChild,M=Object.getOwnPropertyDescriptor(window.Node.prototype,\n \"textContent\"),N=window.Element.prototype.attachShadow,O=Object.getOwnPropertyDescriptor(window.Element.prototype,\"innerHTML\"),P=window.Element.prototype.getAttribute,Q=window.Element.prototype.setAttribute,R=window.Element.prototype.removeAttribute,S=window.Element.prototype.getAttributeNS,T=window.Element.prototype.setAttributeNS,U=window.Element.prototype.removeAttributeNS,ma=window.Element.prototype.insertAdjacentElement,na=window.Element.prototype.insertAdjacentHTML,oa=window.Element.prototype.prepend,\n pa=window.Element.prototype.append,V=window.Element.prototype.before,qa=window.Element.prototype.after,ra=window.Element.prototype.replaceWith,sa=window.Element.prototype.remove,ta=window.HTMLElement,W=Object.getOwnPropertyDescriptor(window.HTMLElement.prototype,\"innerHTML\"),ua=window.HTMLElement.prototype.insertAdjacentElement,va=window.HTMLElement.prototype.insertAdjacentHTML;var wa=new function(){};function xa(){var a=X;window.HTMLElement=function(){function b(){var b=this.**constructor**,c=a.g.get(b);if(!c)throw Error(\"The custom element being constructed was not registered with customElements.\");var e=c.constructionStack;if(0===e.length)return e=F.call(document,c.localName),Object.setPrototypeOf(e,b.prototype),e.__CE_state=1,e.__CE_definition=c,w(a,e),e;c=e.length-1;var f=e[c];if(f===wa)throw Error(\"The HTMLElement constructor was either called reentrantly for this constructor or called multiple times.\");\n e[c]=wa;Object.setPrototypeOf(f,b.prototype);w(a,f);return f}b.prototype=ta.prototype;Object.defineProperty(b.prototype,\"constructor\",{writable:!0,configurable:!0,enumerable:!1,value:b});return b}()};function Y(a,b,d){function c(b){return function(d){for(var e=[],c=0;c<arguments.length;++c)e[c]=arguments[c];c=[];for(var f=[],m=0;m<e.length;m++){var q=e[m];q instanceof Element&&l(q)&&f.push(q);if(q instanceof DocumentFragment)for(q=q.firstChild;q;q=q.nextSibling)c.push(q);else c.push(q)}b.apply(this,e);for(e=0;e<f.length;e++)z(a,f[e]);if(l(this))for(e=0;e<c.length;e++)f=c[e],f instanceof Element&&x(a,f)}}void 0!==d.h&&(b.prepend=c(d.h));void 0!==d.append&&(b.append=c(d.append))};function ya(){var a=X;r(Document.prototype,\"createElement\",function(b){if(this.__CE_hasRegistry){var d=a.a.get(b);if(d)return new d.constructorFunction}b=F.call(this,b);w(a,b);return b});r(Document.prototype,\"importNode\",function(b,d){b=ha.call(this,b,!!d);this.__CE_hasRegistry?A(a,b):v(a,b);return b});r(Document.prototype,\"createElementNS\",function(b,d){if(this.__CE_hasRegistry&&(null===b||\"http://www.w3.org/1999/xhtml\"===b)){var c=a.a.get(d);if(c)return new c.constructorFunction}

[sgcharan]

Hi @liamdebeasi ! is there anything i can do to overcome this issue ?

[liamdebeasi]

There are a couple problems here. The root issue is Ionic's animation utility was checking window when it was not defined in an SSR environment:

ionic-framework/core/src/utils/animation/animation.ts

Line 86 in f0d04bf

typeof (AnimationEffect as any) === 'function' || typeof (window as any).AnimationEffect === 'function';

. This likely caused the window error you were experiencing before. Making the changes noted in the original post interfered with the polyfills in your app, resulting in the error you reported.

This dev build fixes the underlying animation error:

npm i @ionic/angular@6.2.9-dev.11663861940.1f709f96

However, your app will likely still crash unless the custom changes are removed. I recommend reverting server.ts to the stock file that the Angular CLI adds when setting up Angular Universal.

[sgcharan]

Thankyou very much for the quick turnaround!! I will check with this dev build

[sgcharan]

I am now able to run the SSR app without any errors on constructor/window. Thankyou!