themesberg / flowbite

Open-source UI component library and front-end development framework based on Tailwind CSS
https://flowbite.com
MIT License
7.31k stars 710 forks source link

Angular 17 SSR: ERROR ReferenceError: document is not defined #769

Closed dev-garcia closed 4 months ago

dev-garcia commented 6 months ago

Describe the bug When using flowbite in Angular with SSR, we have the following error in the terminal:

ERROR ReferenceError: document is not defined

To Reproduce Steps to reproduce the behavior:

  1. Go to 'https://flowbite.com/docs/getting-started/angular/'
  2. Carry out the processes taught
  3. Run ng serve in the terminal, access the url: http://localhost:4200/ and click the f5 key or interact with the flowbite components.
  4. See errors appear in the terminal

Expected behavior In Angular without ssr, after following these processes no error is returned in the terminal, that's what we expect.

Desktop (please complete the following information):

creaux commented 4 months ago

Is this really the concern of Flowbite? Initialization of the JavaScript related to DOM might only happen in client.

import { Component, PLATFORM_ID, Inject } from '@angular/core';
import { initFlowbite } from "flowbite";
import { isPlatformBrowser } from "@angular/common";

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<div></div>`,
})
export class AppComponent {
  title = 'frontend-comments';

  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  ngOnInit(): void {
    if (isPlatformBrowser(this.platformId)) {
      initFlowbite();
    }
  }
}