Receive [vite] Internal server error: window is not defined when I try to view http://localhost:4200.

[actiniumshark12]

Hello,

I was hoping to get some help on the following issue I am facing with angular 17 and Clarity core 6.10.0

Versions of what I am using:

# ng version

Angular CLI: 17.3.3
Node: 20.11.1
Package Manager: npm 10.4.0
OS: linux x64

Angular: 17.3.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.3
@angular-devkit/build-angular   17.3.3
@angular-devkit/core            17.3.3
@angular-devkit/schematics      17.3.3
@angular/cli                    17.3.3
@angular/ssr                    17.3.3
@schematics/angular             17.3.3
rxjs                            7.8.1
typescript                      5.3.3
zone.js                         0.14.4


# npm info @cds/core version
6.10.0

# npm info @clr/angular version
17.0.1

# npm info @clr/ui version
17.0.1

OS version:

# cat /etc/os-release
PRETTY_NAME="Ubuntu 22.04.3 LTS"
NAME="Ubuntu"
VERSION_ID="22.04"
VERSION="22.04.3 LTS (Jammy Jellyfish)"
VERSION_CODENAME=jammy
ID=ubuntu
ID_LIKE=debian

The error that I see

8:55:22 PM [vite] Internal server error: window is not defined
      at eval (/Angular/test-ssr-ang/node_modules/@cds/core/internal/utils/exists.js:1:209)
      at async instantiateModule (file:///Angular/test-ssr-ang/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54758:9)

What I did to get this error to happen using the default angular setup.

# ng new test-ssr-ang --routing --style scss --standalone false --ssr true --interactive false

Installed the clarity packages

# npm install @cds/core @clr/angular @clr/ui --save

The steps from here:
Adding Clarity to an Existing Angular Application

Just to be clear just incase Im might have not understood Step 5.
Step 5: Add Clarity to Angular Application

Here is what my app.module.ts looks like.

import { NgModule } from '@angular/core';
import { BrowserModule, provideClientHydration } from '@angular/platform-browser';
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { ClarityModule } from "@clr/angular";

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ClarityModule,
    AppRoutingModule
  ],
  providers: [
    provideClientHydration()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then I run.

# ng serve

Put the http://localhost:4200 in my firefox browser and I get the error:

8:55:22 PM [vite] Internal server error: window is not defined
      at eval (/Angular/test-ssr-ang/node_modules/@cds/core/internal/utils/exists.js:1:209)
      at async instantiateModule (file:///Angular/test-ssr-ang/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54758:9)

I am just now getting started with this so a newbie maybe I missed something? I check the compat guide and that all looks well I guess I am missing something perhaps or have it setup wrong.

The one thing that I have figured out from messing with this all day is that it happens with the SSR being set and from looking around the web. Looks like the window var is not defined until it is used in the browser mode so on the server it is not defined.

I don't know if it may be a issue I need to file a issue on or I just missed something. Any help would be much appreciated point to a docs I may have missed would be great as well. Hopefully someone will be able to say go look here to see what you need to do.

If something else is needed that I didn't put let me know I didn't add any code just using the default angular code that gets generated. I checked to see that the default angular page showed before I added the clarity steps.

Thanks in advanced.

[kevinbuhmann]

Unfortunately, Clarity components are not guaranteed to be SSR compatible. This is not a use case that we currently support.

[actiniumshark12]

Thanks for the information Kevin. Would it be worth me opening a feature request in the clarity core area for you all to look into if one is not currently open?

Thanks

[kevinbuhmann]

You can always open a feature request. To be completely honest, Clarity Core component development has been paused for nearly two years with no sign of that changing. Further, I have not heard of any internal need for server-side rendering, so it's unlikely to be something we work on unless I am wrong or something changes.

[actiniumshark12]

Thanks, Kevin will open it just in case someone else hits it thanks for the update will see what I will do have a great day.