Window undefined when using Angular Universal

dvarnai commented 3 years ago

Before opening, please confirm:

[X] I have searched for duplicate or closed issues and discussions.
[X] I have read the guide for submitting bug reports.
[X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Angular

Amplify APIs

Not applicable

Amplify Categories

Not applicable

Environment information

``` System: OS: macOS 11.2.3 CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz Memory: 2.15 GB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 15.7.0 - ~/n/bin/node Yarn: 2.4.1 - ~/n/bin/yarn npm: 7.4.3 - ~/n/bin/npm Browsers: Chrome: 90.0.4430.85 Firefox: 88.0 Safari: 14.0.3 npmPackages: @angular-builders/custom-webpack: ^11.0.0 => 11.1.1 @angular-devkit/build-angular: ^0.1102.1 => 0.1102.10 @angular/animations: ^11.2.1 => 11.2.11 @angular/animations/browser: undefined () @angular/animations/browser/testing: undefined () @angular/cdk: ^11.2.1 => 11.2.10 @angular/cdk/a11y: undefined () @angular/cdk/accordion: undefined () @angular/cdk/bidi: undefined () @angular/cdk/clipboard: undefined () @angular/cdk/coercion: undefined () @angular/cdk/collections: undefined () @angular/cdk/drag-drop: undefined () @angular/cdk/keycodes: undefined () @angular/cdk/layout: undefined () @angular/cdk/observers: undefined () @angular/cdk/overlay: undefined () @angular/cdk/platform: undefined () @angular/cdk/portal: undefined () @angular/cdk/scrolling: undefined () @angular/cdk/stepper: undefined () @angular/cdk/table: undefined () @angular/cdk/testing: undefined () @angular/cdk/testing/protractor: undefined () @angular/cdk/testing/testbed: undefined () @angular/cdk/text-field: undefined () @angular/cdk/tree: undefined () @angular/cli: ^11.2.1 => 11.2.10 @angular/common: ^11.2.1 => 11.2.11 @angular/common/http: undefined () @angular/common/http/testing: undefined () @angular/common/testing: undefined () @angular/common/upgrade: undefined () @angular/compiler: ^11.2.1 => 11.2.11 @angular/compiler-cli: ^11.2.1 => 11.2.11 @angular/compiler/testing: undefined () @angular/core: ^11.2.1 => 11.2.11 @angular/core/testing: undefined () @angular/forms: ^11.2.1 => 11.2.11 @angular/material: ^11.2.1 => 11.2.10 @angular/material/autocomplete: undefined () @angular/material/autocomplete/testing: undefined () @angular/material/badge: undefined () @angular/material/badge/testing: undefined () @angular/material/bottom-sheet: undefined () @angular/material/bottom-sheet/testing: undefined () @angular/material/button: undefined () @angular/material/button-toggle: undefined () @angular/material/button-toggle/testing: undefined () @angular/material/button/testing: undefined () @angular/material/card: undefined () @angular/material/card/testing: undefined () @angular/material/checkbox: undefined () @angular/material/checkbox/testing: undefined () @angular/material/chips: undefined () @angular/material/chips/testing: undefined () @angular/material/core: undefined () @angular/material/core/testing: undefined () @angular/material/datepicker: undefined () @angular/material/datepicker/testing: undefined () @angular/material/dialog: undefined () @angular/material/dialog/testing: undefined () @angular/material/divider: undefined () @angular/material/divider/testing: undefined () @angular/material/expansion: undefined () @angular/material/expansion/testing: undefined () @angular/material/form-field: undefined () @angular/material/form-field/testing: undefined () @angular/material/form-field/testing/control: undefined () @angular/material/grid-list: undefined () @angular/material/grid-list/testing: undefined () @angular/material/icon: undefined () @angular/material/icon/testing: undefined () @angular/material/input: undefined () @angular/material/input/testing: undefined () @angular/material/list: undefined () @angular/material/list/testing: undefined () @angular/material/menu: undefined () @angular/material/menu/testing: undefined () @angular/material/paginator: undefined () @angular/material/paginator/testing: undefined () @angular/material/progress-bar: undefined () @angular/material/progress-bar/testing: undefined () @angular/material/progress-spinner: undefined () @angular/material/progress-spinner/testing: undefined () @angular/material/radio: undefined () @angular/material/radio/testing: undefined () @angular/material/select: undefined () @angular/material/select/testing: undefined () @angular/material/sidenav: undefined () @angular/material/sidenav/testing: undefined () @angular/material/slide-toggle: undefined () @angular/material/slide-toggle/testing: undefined () @angular/material/slider: undefined () @angular/material/slider/testing: undefined () @angular/material/snack-bar: undefined () @angular/material/snack-bar/testing: undefined () @angular/material/sort: undefined () @angular/material/sort/testing: undefined () @angular/material/stepper: undefined () @angular/material/stepper/testing: undefined () @angular/material/table: undefined () @angular/material/table/testing: undefined () @angular/material/tabs: undefined () @angular/material/tabs/testing: undefined () @angular/material/toolbar: undefined () @angular/material/toolbar/testing: undefined () @angular/material/tooltip: undefined () @angular/material/tooltip/testing: undefined () @angular/material/tree: undefined () @angular/material/tree/testing: undefined () @angular/platform-browser: ^11.2.1 => 11.2.11 @angular/platform-browser-dynamic: ^11.2.1 => 11.2.11 @angular/platform-browser-dynamic/testing: undefined () @angular/platform-browser/animations: undefined () @angular/platform-browser/testing: undefined () @angular/platform-server: ^11.2.1 => 11.2.11 @angular/platform-server/testing: undefined () @angular/router: ^11.2.1 => 11.2.11 @angular/router/testing: undefined () @angular/router/upgrade: undefined () @aws-amplify/ui-angular: ^1.0.7 => 1.0.7 @fortawesome/angular-fontawesome: 0.8.x => 0.8.2 @fortawesome/angular-fontawesome/testing: undefined () @fortawesome/fontawesome-svg-core: ^1.2.34 => 1.2.35 @fortawesome/free-brands-svg-icons: ^5.15.2 => 5.15.3 @nguniversal/builders: ^11.2.1 => 11.2.1 @nguniversal/express-engine: ^11.2.1 => 11.2.1 @nguniversal/express-engine/tokens: undefined () @types/express: ^4.17.0 => 4.17.11 @types/jasmine: ^3.6.3 => 3.6.9 @types/node: ^14.14.28 => 14.14.41 amazon-cognito-identity-js: ^4.6.0 => 4.6.0 amazon-cognito-identity-js-typescript: ^1.22.0 => 1.22.0 autoprefixer: ^10.2.4 => 10.2.5 (10.2.4) aws-amplify: ^3.3.27 => 3.3.27 babel-webpack: 1.0.0 chart.js: ^2.9.4 => 2.9.4 codelyzer: ^6.0.1 => 6.0.1 example-typescript: 1.0.0 express: ^4.15.2 => 4.17.1 hammerjs: ^2.0.8 => 2.0.8 jasmine-core: ^3.6.0 => 3.7.1 (2.8.0) jasmine-spec-reporter: ^6.0.0 => 6.0.0 karma: ^6.1.1 => 6.3.2 karma-chrome-launcher: ^3.1.0 => 3.1.0 karma-coverage: ^2.0.3 => 2.0.3 karma-coverage-coffee-example: 1.0.0 karma-jasmine: ^4.0.1 => 4.0.1 karma-jasmine-html-reporter: ^1.5.4 => 1.5.4 lib: 0.0.1 ng2-charts: 2.4.2 => 2.4.2 ngx-amplify: ^0.3.2 => 0.3.2 node-example: 1.0.0 postcss: ^8.2.6 => 8.2.12 (8.2.4, 7.0.35, 6.0.23, 7.0.21) postcss-import: ^14.0.0 => 14.0.1 (14.0.0) postcss-loader: ^5.0.0 => 5.2.0 (4.2.0) postcss-nesting: ^7.0.1 => 7.0.1 protractor: ^7.0.0 => 7.0.0 protractor-example: 1.0.0 rxjs: ^6.6.3 => 6.6.7 (6.6.3, 5.5.12) rxjs/ajax: undefined () rxjs/fetch: undefined () rxjs/internal-compatibility: undefined () rxjs/operators: undefined () rxjs/testing: undefined () rxjs/webSocket: undefined () tailwindcss: ^2.0.3 => 2.1.2 ts-node: ^9.1.1 => 9.1.1 tslib: ^2.1.0 => 2.2.0 (1.14.1, 2.1.0) tslint: ^6.1.3 => 6.1.3 typescript: 4.1.5 => 4.1.5 typescript-example: 1.0.0 webpack: ^5.23.0 => 5.35.1 (4.44.2) zone-mix: undefined () zone-node: undefined () zone-testing: undefined () zone.js: ^0.11.4 => 0.11.4 (0.10.3) zone.js/async-test: undefined () zone.js/async-test.min: undefined () zone.js/fake-async-test: undefined () zone.js/fake-async-test.min: undefined () zone.js/jasmine-patch: undefined () zone.js/jasmine-patch.min: undefined () zone.js/long-stack-trace-zone: undefined () zone.js/long-stack-trace-zone.min: undefined () zone.js/mocha-patch: undefined () zone.js/mocha-patch.min: undefined () zone.js/proxy: undefined () zone.js/proxy.min: undefined () zone.js/sync-test: undefined () zone.js/sync-test.min: undefined () zone.js/task-tracking: undefined () zone.js/task-tracking.min: undefined () zone.js/webapis-media-query: undefined () zone.js/webapis-media-query.min: undefined () zone.js/webapis-notification: undefined () zone.js/webapis-notification.min: undefined () zone.js/webapis-rtc-peer-connection: undefined () zone.js/webapis-rtc-peer-connection.min: undefined () zone.js/webapis-shadydom: undefined () zone.js/webapis-shadydom.min: undefined () zone.js/wtf: undefined () zone.js/wtf.min: undefined () zone.js/zone-bluebird: undefined () zone.js/zone-bluebird.min: undefined () zone.js/zone-error: undefined () zone.js/zone-error.min: undefined () zone.js/zone-legacy: undefined () zone.js/zone-legacy.min: undefined () zone.js/zone-patch-canvas: undefined () zone.js/zone-patch-canvas.min: undefined () zone.js/zone-patch-cordova: undefined () zone.js/zone-patch-cordova.min: undefined () zone.js/zone-patch-electron: undefined () zone.js/zone-patch-electron.min: undefined () zone.js/zone-patch-fetch: undefined () zone.js/zone-patch-fetch.min: undefined () zone.js/zone-patch-jsonp: undefined () zone.js/zone-patch-jsonp.min: undefined () zone.js/zone-patch-message-port: undefined () zone.js/zone-patch-message-port.min: undefined () zone.js/zone-patch-promise-test: undefined () zone.js/zone-patch-promise-test.min: undefined () zone.js/zone-patch-resize-observer: undefined () zone.js/zone-patch-resize-observer.min: undefined () zone.js/zone-patch-rxjs: undefined () zone.js/zone-patch-rxjs-fake-async: undefined () zone.js/zone-patch-rxjs-fake-async.min: undefined () zone.js/zone-patch-rxjs.min: undefined () zone.js/zone-patch-socket-io: undefined () zone.js/zone-patch-socket-io.min: undefined () zone.js/zone-patch-user-media: undefined () zone.js/zone-patch-user-media.min: undefined () npmGlobalPackages: @angular/cli: 11.1.1 @aws-amplify/cli: 4.48.0 @nestjs/cli: 7.5.6 lerna: 3.22.1 license-checker: 25.0.1 npm: 7.4.3 tsc: 1.20150623.0 typescript: 4.1.3 yarn: 1.22.10 ```

Describe the bug

When using Angular Universal, defineCustomElements method call throws an error due to window being undefined:

/server/main.js:262176
Object(_aws_amplify_ui_components_loader__WEBPACK_IMPORTED_MODULE_3__["defineCustomElements"])(window || undefined);
                                                                                               ^

ReferenceError: window is not defined

The bug is caused by the following line:

https://github.com/aws-amplify/amplify-js/blob/630d711fbcc1b339d1ae1169a6972e4f96aaf108/packages/amplify-ui-angular/src/amplify-module.ts#L61

Replacing the line with the following solves the issue and amplify UI seems to work just fine, however I'm not sure if this is the best approach:

defineCustomElements(typeof window === 'undefined' ? undefined : window);

The defineCustomElements method seems to do this check itself as well, however, the error seems to happen before the method is actually called.

Expected behavior

Angular UI should work with SSR

Reproduction steps

Use angular universal with amplify ui.

Code Snippet

// Put your code below this line.

Log output

``` // Put your logs below this line ```

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale[bot] commented 3 years ago

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.

chrisbonifacio commented 3 years ago

Hi :wave: Sorry this was auto-closed by stale bot. We are working towards preventing this from happening in the future.

I see you have found a workaround. Also feel free to open a PR and link it to this issue. I'll bring it to the attention of the UI team so they can either merge it or help refine the solution to address any potential edge cases.

Milan-Shah commented 2 years ago

@dvarnai We apologize for the late response to your issue request. We have recently launched a major version for @aws-amplify/ui-react@2.1.0, please let us know if you are still seeing the issue on your end. We are not able to reproduce it on our end, if you have any questions or suggestion, please reach out :)

aws-amplify / amplify-ui