search

goetzrobin / spartan

Cutting-edge tools powering Angular full-stack development.
https://spartan.ng
MIT License
1.13k stars 123 forks source link

SSR error on select component 'window' not found #215

Closed sefatanam closed 3 months ago

sefatanam commented 3 months ago

Here is the environment detail,

  1. package.json 
    {
"name": "@NAME/source",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"start": "nx serve",
"build": "nx build",
"test": "nx test"
},
"private": true,
"dependencies": {
"@angular/animations": "~17.2.0",
"@angular/cdk": "17.1.0",
"@angular/common": "~17.2.0",
"@angular/compiler": "~17.2.0",
"@angular/core": "~17.2.0",
"@angular/forms": "~17.2.0",
"@angular/platform-browser": "~17.2.0",
"@angular/platform-browser-dynamic": "~17.2.0",
"@angular/platform-server": "~17.2.0",
"@angular/router": "~17.2.0",
"@angular/ssr": "~17.2.0",
"@ng-icons/core": "^25.1.0",
"@ng-icons/lucide": "^26.3.0",
"@nx/angular": "18.1.2",
"@spartan-ng/ui-accordion-brain": "0.0.1-alpha.337",
"@spartan-ng/ui-alertdialog-brain": "0.0.1-alpha.337",
"@spartan-ng/ui-avatar-brain": "0.0.1-alpha.337",
"@spartan-ng/ui-checkbox-brain": "0.0.1-alpha.337",
"@spartan-ng/ui-collapsible-brain": "0.0.1-alpha.337",
"@spartan-ng/ui-command-brain": "0.0.1-alpha.337",
"@spartan-ng/ui-core": "0.0.1-alpha.337",
"@spartan-ng/ui-dialog-brain": "0.0.1-alpha.337",
"@spartan-ng/ui-hovercard-brain": "0.0.1-alpha.337",
"@spartan-ng/ui-label-brain": "0.0.1-alpha.337",
"@spartan-ng/ui-menu-brain": "0.0.1-alpha.337",
"@spartan-ng/ui-popover-brain": "0.0.1-alpha.337",
"@spartan-ng/ui-progress-brain": "0.0.1-alpha.337",
"@spartan-ng/ui-radiogroup-brain": "0.0.1-alpha.337",
"@spartan-ng/ui-select-brain": "0.0.1-alpha.337",
"@spartan-ng/ui-separator-brain": "0.0.1-alpha.337",
"@spartan-ng/ui-sheet-brain": "0.0.1-alpha.337",
"@spartan-ng/ui-switch-brain": "0.0.1-alpha.337",
"@spartan-ng/ui-table-brain": "0.0.1-alpha.337",
"@spartan-ng/ui-tabs-brain": "0.0.1-alpha.337",
"@spartan-ng/ui-toggle-brain": "0.0.1-alpha.337",
"@spartan-ng/ui-tooltip-brain": "0.0.1-alpha.337",
"class-variance-authority": "^0.6.0",
"clsx": "^1.2.1",
"embla-carousel-angular": "^14.0.0",
"express": "~4.18.2",
"ngx-scrollbar": "^13.0.1",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "~17.2.0",
"@angular-devkit/core": "~17.2.0",
"@angular-devkit/schematics": "~17.2.0",
"@angular-eslint/eslint-plugin": "~17.0.0",
"@angular-eslint/eslint-plugin-template": "~17.0.0",
"@angular-eslint/template-parser": "~17.0.0",
"@angular/cli": "~17.2.0",
"@angular/compiler-cli": "~17.2.0",
"@angular/language-service": "~17.2.0",
"@nx/cypress": "18.1.2",
"@nx/eslint": "18.1.2",
"@nx/eslint-plugin": "18.1.2",
"@nx/jest": "18.1.2",
"@nx/js": "18.1.2",
"@nx/web": "18.1.2",
"@nx/workspace": "18.1.2",
"@schematics/angular": "~17.2.0",
"@spartan-ng/cli": "0.0.1-alpha.342",
"@swc-node/register": "~1.8.0",
"@swc/core": "~1.3.85",
"@swc/helpers": "~0.5.2",
"@types/express": "4.17.14",
"@types/jest": "^29.4.0",
"@types/node": "18.16.9",
"@typescript-eslint/eslint-plugin": "^6.13.2",
"@typescript-eslint/parser": "^6.13.2",
"autoprefixer": "^10.4.0",
"cypress": "^13.6.6",
"eslint": "~8.48.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-cypress": "^2.13.4",
"jest": "^29.4.1",
"jest-environment-jsdom": "^29.4.1",
"jest-preset-angular": "~14.0.3",
"jsonc-eslint-parser": "^2.1.0",
"ng-packagr": "~17.2.0",
"nx": "18.1.2",
"postcss": "^8.4.5",
"postcss-url": "~10.1.3",
"prettier": "^2.6.2",
"tailwind-merge": "^2.2.0",
"tailwindcss": "^3.0.2",
"tailwindcss-animate": "^1.0.6",
"ts-jest": "^29.1.0",
"ts-node": "10.9.1",
"typescript": "~5.3.2"
},
"nx": {
"includedScripts": []
}
}
  2. pnpm - 8.15.2
  3. node 20.9.0

Which area/package is the issue in?

select

Description

I followed the official tutorial for the select component. However, whenever I use it in my app, which is the latest version of Angular (17.2.0) with server-side rendering, it shows me an ERROR ReferenceError: window is not defined in my terminal. However, other components such as ContextMenu, Table, Accordion, etc., are working fine.

ERROR

ERROR ReferenceError: window is not defined
    at eval (/Users/sefat/Documents/Github/ng-deep-drive/node_modules/.pnpm/@angular+cdk@17.1.0_@angular+common@17.2.4_@angular+core@17.2.4_rxjs@7.8.1/node_modules/@angular/cdk/fesm2022/listbox.mjs:804:17)
    at _ZoneDelegate.invoke (/Users/sefat/Documents/Github/ng-deep-drive/node_modules/.pnpm/zone.js@0.14.4/node_modules/zone.js/fesm2015/zone-node.js:368:26)
    at _Zone.run (/Users/sefat/Documents/Github/ng-deep-drive/node_modules/.pnpm/zone.js@0.14.4/node_modules/zone.js/fesm2015/zone-node.js:130:43)
    at _NgZone.runOutsideAngular (/Users/sefat/Documents/Github/ng-deep-drive/node_modules/.pnpm/@angular+core@17.2.4_rxjs@7.8.1_zone.js@0.14.4/node_modules/@angular/core/fesm2022/core.mjs:14119:28)
    at _CdkListbox._setPreviousActiveOptionAsActiveOptionOnWindowBlur (/Users/sefat/Documents/Github/ng-deep-drive/node_modules/.pnpm/@angular+cdk@17.1.0_@angular+common@17.2.4_@angular+core@17.2.4_rxjs@7.8.1/node_modules/@angular/cdk/fesm2022/listbox.mjs:803:17)
    at _CdkListbox (/Users/sefat/Documents/Github/ng-deep-drive/node_modules/.pnpm/@angular+cdk@17.1.0_@angular+common@17.2.4_@angular+core@17.2.4_rxjs@7.8.1/node_modules/@angular/cdk/fesm2022/listbox.mjs:335:10)
    at NodeInjectorFactory.CdkListbox_Factory (/Users/sefat/Documents/Github/ng-deep-drive/node_modules/.pnpm/@angular+cdk@17.1.0_@angular+common@17.2.4_@angular+core@17.2.4_rxjs@7.8.1/node_modules/@angular/cdk/fesm2022/listbox.mjs:814:14)
    at getNodeInjectable (/Users/sefat/Documents/Github/ng-deep-drive/node_modules/.pnpm/@angular+core@17.2.4_rxjs@7.8.1_zone.js@0.14.4/node_modules/@angular/core/fesm2022/core.mjs:6986:44)
    at instantiateAllDirectives (/Users/sefat/Documents/Github/ng-deep-drive/node_modules/.pnpm/@angular+core@17.2.4_rxjs@7.8.1_zone.js@0.14.4/node_modules/@angular/core/fesm2022/core.mjs:11206:27)
    at createDirectivesInstances (/Users/sefat/Documents/Github/ng-deep-drive/node_modules/.pnpm/@angular+core@17.2.4_rxjs@7.8.1_zone.js@0.14.4/node_modules/@angular/core/fesm2022/core.mjs:10605:5)
ReferenceError: window is not defined
    at eval (/Users/sefat/Documents/Github/ng-deep-drive/node_modules/.pnpm/@angular+cdk@17.1.0_@angular+common@17.2.4_@angular+core@17.2.4_rxjs@7.8.1/node_modules/@angular/cdk/fesm2022/listbox.mjs:804:17)
    at _ZoneDelegate.invoke (/Users/sefat/Documents/Github/ng-deep-drive/node_modules/.pnpm/zone.js@0.14.4/node_modules/zone.js/fesm2015/zone-node.js:368:26)
    at _Zone.run (/Users/sefat/Documents/Github/ng-deep-drive/node_modules/.pnpm/zone.js@0.14.4/node_modules/zone.js/fesm2015/zone-node.js:130:43)
    at _NgZone.runOutsideAngular (/Users/sefat/Documents/Github/ng-deep-drive/node_modules/.pnpm/@angular+core@17.2.4_rxjs@7.8.1_zone.js@0.14.4/node_modules/@angular/core/fesm2022/core.mjs:14119:28)
    at _CdkListbox._setPreviousActiveOptionAsActiveOptionOnWindowBlur (/Users/sefat/Documents/Github/ng-deep-drive/node_modules/.pnpm/@angular+cdk@17.1.0_@angular+common@17.2.4_@angular+core@17.2.4_rxjs@7.8.1/node_modules/@angular/cdk/fesm2022/listbox.mjs:803:17)
    at _CdkListbox (/Users/sefat/Documents/Github/ng-deep-drive/node_modules/.pnpm/@angular+cdk@17.1.0_@angular+common@17.2.4_@angular+core@17.2.4_rxjs@7.8.1/node_modules/@angular/cdk/fesm2022/listbox.mjs:335:10)
    at NodeInjectorFactory.CdkListbox_Factory (/Users/sefat/Documents/Github/ng-deep-drive/node_modules/.pnpm/@angular+cdk@17.1.0_@angular+common@17.2.4_@angular+core@17.2.4_rxjs@7.8.1/node_modules/@angular/cdk/fesm2022/listbox.mjs:814:14)
    at getNodeInjectable (/Users/sefat/Documents/Github/ng-deep-drive/node_modules/.pnpm/@angular+core@17.2.4_rxjs@7.8.1_zone.js@0.14.4/node_modules/@angular/core/fesm2022/core.mjs:6986:44)
    at instantiateAllDirectives (/Users/sefat/Documents/Github/ng-deep-drive/node_modules/.pnpm/@angular+core@17.2.4_rxjs@7.8.1_zone.js@0.14.4/node_modules/@angular/core/fesm2022/core.mjs:11206:27)
    at createDirectivesInstances (/Users/sefat/Documents/Github/ng-deep-drive/node_modules/.pnpm/@angular+core@17.2.4_rxjs@7.8.1_zone.js@0.14.4/node_modules/@angular/core/fesm2022/core.mjs:10605:5)
3:12:05 AM [vite] Internal server error: window is not defined
      at eval (/Users/sefat/Documents/Github/ng-deep-drive/node_modules/.pnpm/@angular+cdk@17.1.0_@angular+common@17.2.4_@angular+core@17.2.4_rxjs@7.8.1/node_modules/@angular/cdk/fesm2022/listbox.mjs:804:17)
      at _ZoneDelegate.invoke (/Users/sefat/Documents/Github/ng-deep-drive/node_modules/.pnpm/zone.js@0.14.4/node_modules/zone.js/fesm2015/zone-node.js:368:26)
      at _Zone.run (/Users/sefat/Documents/Github/ng-deep-drive/node_modules/.pnpm/zone.js@0.14.4/node_modules/zone.js/fesm2015/zone-node.js:130:43)
      at _NgZone.runOutsideAngular (/Users/sefat/Documents/Github/ng-deep-drive/node_modules/.pnpm/@angular+core@17.2.4_rxjs@7.8.1_zone.js@0.14.4/node_modules/@angular/core/fesm2022/core.mjs:14119:28)
      at _CdkListbox._setPreviousActiveOptionAsActiveOptionOnWindowBlur (/Users/sefat/Documents/Github/ng-deep-drive/node_modules/.pnpm/@angular+cdk@17.1.0_@angular+common@17.2.4_@angular+core@17.2.4_rxjs@7.8.1/node_modules/@angular/cdk/fesm2022/listbox.mjs:803:17)
      at _CdkListbox (/Users/sefat/Documents/Github/ng-deep-drive/node_modules/.pnpm/@angular+cdk@17.1.0_@angular+common@17.2.4_@angular+core@17.2.4_rxjs@7.8.1/node_modules/@angular/cdk/fesm2022/listbox.mjs:335:10)
      at NodeInjectorFactory.CdkListbox_Factory (/Users/sefat/Documents/Github/ng-deep-drive/node_modules/.pnpm/@angular+cdk@17.1.0_@angular+common@17.2.4_@angular+core@17.2.4_rxjs@7.8.1/node_modules/@angular/cdk/fesm2022/listbox.mjs:814:14)
      at getNodeInjectable (/Users/sefat/Documents/Github/ng-deep-drive/node_modules/.pnpm/@angular+core@17.2.4_rxjs@7.8.1_zone.js@0.14.4/node_modules/@angular/core/fesm2022/core.mjs:6986:44)
      at instantiateAllDirectives (/Users/sefat/Documents/Github/ng-deep-drive/node_modules/.pnpm/@angular+core@17.2.4_rxjs@7.8.1_zone.js@0.14.4/node_modules/@angular/core/fesm2022/core.mjs:11206:27)
      at createDirectivesInstances (/Users/sefat/Documents/Github/ng-deep-drive/node_modules/.pnpm/@angular+core@17.2.4_rxjs@7.8.1_zone.js@0.14.4/node_modules/@angular/core/fesm2022/core.mjs:10605:5) (x6)

Other information

I practice with nx-workspace, First I generated a angular standalone app with SSR enabled then add spartan ui on it .

I would be willing to submit a PR to fix this issue

sefatanam commented 3 months ago

Checkout my practice repository link, here you can directly reproduce the error, https://github.com/sefatanam/ng-nx-ssr-spartan-ui

goetzrobin commented 3 months ago

I noticed this too. I think this is actually coming from the combobox component of the Angular CDK. We should probably open an issue upstream

marcjulian commented 3 months ago

This should be fixed by https://github.com/angular/components/pull/28746. It is not released yet, maybe it will be included in a 17.3.x bugfix release.

sefatanam commented 3 months ago

This should be fixed by https://github.com/angular/components/pull/28746. It is not released yet, maybe it will be included in a 17.3.x bugfix release.

Got it, Thanks ✨

marcjulian commented 3 months ago

Fix landed in @angular/cdk@17.3.2

sefatanam commented 3 months ago

I've tested the select component with the latest update of angular-cdk, and it appears that the previous error no longer occurs. I updated my package.json file using nx migrate latest,

{
  "name": "@NAME/source",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "start": "nx serve",
    "build": "nx build",
    "test": "nx test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "17.3.4",
    "@angular/cdk": "17.3.4",
    "@angular/common": "17.3.4",
    "@angular/compiler": "17.3.4",
    "@angular/core": "17.3.4",
    "@angular/forms": "17.3.4",
    "@angular/platform-browser": "17.3.4",
    "@angular/platform-browser-dynamic": "17.3.4",
    "@angular/platform-server": "17.3.4",
    "@angular/router": "17.3.4",
    "@angular/ssr": "17.3.4",
    "@ng-icons/core": "^25.1.0",
    "@ng-icons/lucide": "^26.3.0",
    "@nx/angular": "18.2.4",
    "@spartan-ng/ui-accordion-brain": "0.0.1-alpha.337",
    "@spartan-ng/ui-alertdialog-brain": "0.0.1-alpha.337",
    "@spartan-ng/ui-avatar-brain": "0.0.1-alpha.337",
    "@spartan-ng/ui-checkbox-brain": "0.0.1-alpha.337",
    "@spartan-ng/ui-collapsible-brain": "0.0.1-alpha.337",
    "@spartan-ng/ui-command-brain": "0.0.1-alpha.337",
    "@spartan-ng/ui-core": "0.0.1-alpha.337",
    "@spartan-ng/ui-dialog-brain": "0.0.1-alpha.337",
    "@spartan-ng/ui-hovercard-brain": "0.0.1-alpha.337",
    "@spartan-ng/ui-label-brain": "0.0.1-alpha.337",
    "@spartan-ng/ui-menu-brain": "0.0.1-alpha.337",
    "@spartan-ng/ui-popover-brain": "0.0.1-alpha.337",
    "@spartan-ng/ui-progress-brain": "0.0.1-alpha.337",
    "@spartan-ng/ui-radiogroup-brain": "0.0.1-alpha.337",
    "@spartan-ng/ui-select-brain": "0.0.1-alpha.337",
    "@spartan-ng/ui-separator-brain": "0.0.1-alpha.337",
    "@spartan-ng/ui-sheet-brain": "0.0.1-alpha.337",
    "@spartan-ng/ui-switch-brain": "0.0.1-alpha.337",
    "@spartan-ng/ui-table-brain": "0.0.1-alpha.337",
    "@spartan-ng/ui-tabs-brain": "0.0.1-alpha.337",
    "@spartan-ng/ui-toggle-brain": "0.0.1-alpha.337",
    "@spartan-ng/ui-tooltip-brain": "0.0.1-alpha.337",
    "class-variance-authority": "^0.6.0",
    "clsx": "^1.2.1",
    "embla-carousel-angular": "^14.0.0",
    "express": "~4.18.2",
    "ngx-scrollbar": "^13.0.1",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "17.3.4",
    "@angular-devkit/core": "17.3.4",
    "@angular-devkit/schematics": "17.3.4",
    "@angular-eslint/eslint-plugin": "17.3.0",
    "@angular-eslint/eslint-plugin-template": "17.3.0",
    "@angular-eslint/template-parser": "17.3.0",
    "@angular/cli": "~17.3.0",
    "@angular/compiler-cli": "17.3.4",
    "@angular/language-service": "17.3.4",
    "@nx/cypress": "18.2.4",
    "@nx/eslint": "18.2.4",
    "@nx/eslint-plugin": "18.2.4",
    "@nx/jest": "18.2.4",
    "@nx/js": "18.2.4",
    "@nx/web": "18.2.4",
    "@nx/workspace": "18.2.4",
    "@schematics/angular": "17.3.4",
    "@spartan-ng/cli": "0.0.1-alpha.342",
    "@swc-node/register": "~1.8.0",
    "@swc/core": "~1.3.85",
    "@swc/helpers": "~0.5.2",
    "@types/express": "4.17.14",
    "@types/jest": "^29.4.0",
    "@types/node": "18.16.9",
    "@typescript-eslint/eslint-plugin": "7.6.0",
    "@typescript-eslint/parser": "7.6.0",
    "autoprefixer": "^10.4.0",
    "cypress": "^13.6.6",
    "eslint": "8.57.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-cypress": "^2.13.4",
    "jest": "^29.4.1",
    "jest-environment-jsdom": "^29.4.1",
    "jest-preset-angular": "~14.0.3",
    "jsonc-eslint-parser": "^2.1.0",
    "ng-packagr": "17.3.0",
    "nx": "18.2.4",
    "postcss": "^8.4.5",
    "postcss-url": "~10.1.3",
    "prettier": "^2.6.2",
    "tailwind-merge": "^2.2.0",
    "tailwindcss": "^3.0.2",
    "tailwindcss-animate": "^1.0.6",
    "ts-jest": "^29.1.0",
    "ts-node": "10.9.1",
    "typescript": "5.4.5"
  },
  "nx": {
    "includedScripts": []
  }
}

Closing this issue Thanks