Anular 17 SSR document is not defined

[thedarkknight197]

Hello I have installed flowbite using this documentation: https://flowbite.com/docs/getting-started/angular/

I have imported the ui of search input in my project:

components.html

<p>user works!</p>
<form>
  <label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
  <div class="relative">
    <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
      <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
      </svg>
    </div>
    <input type="search" id="default-search" class="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search Mockups, Logos..." required>
    <button type="submit" class="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Search</button>
  </div>
</form>

component.ts

export class UserComponent implements OnInit{
  protected readonly RouterNavigation = RouterNavigation;

  ngOnInit(): void {
      initFlowbite();
  }
}

it return:

Unchanged output files: 7
Application bundle generation complete. [0.194 seconds]
Page reload sent to client(s).
ERROR ReferenceError: document is not defined
    at initAccordions (.../node_modules/flowbite/lib/esm/components/accordion/index.js:142:5)
    at initFlowbite (.../node_modules/flowbite/lib/esm/components/index.js:14:5)
    at _UserComponent.ngOnInit .../src/app/children/dashboard/children/user/user.component.ts:14:7)
    at callHookInternal (.../node_modules/@angular/core/fesm2022/core.mjs:3607:14)
    at callHook .../node_modules/@angular/core/fesm2022/core.mjs:3634:13)
    at callHooks .../node_modules/@angular/core/fesm2022/core.mjs:3589:17)
    at executeInitAndCheckHooks .../node_modules/@angular/core/fesm2022/core.mjs:3539:9)
    at refreshView (.../node_modules/@angular/core/fesm2022/core.mjs:13556:21)
    at detectChangesInView (.../node_modules/@angular/core/fesm2022/core.mjs:13765:9)
    at detectChangesInViewIfAttached (.../node_modules/@angular/core/fesm2022/core.mjs:13728:5)

tailwind.config:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
    "./node_modules/flowbite/**/*.js" // add this line
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require("daisyui"),
    require('flowbite/plugin'),
  ],
}

style.css

/* You can add global styles to this file, and also import other style files */
@tailwind base;
@tailwind components;
@tailwind utilities;

[creaux]

Duplicate of #769

[GkIgor]

In one of the component lifecycle methods, while your ssr is enabled, make sure you are in the browser before starting flowbit.

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [ ],
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
export class HomeComponent {
  constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
  ) {}

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

Reference: https://github.com/GkIgor/bug-guards-v17

[zoltanszogyenyi]

Hey everyone,

Please follow this guide and create an injectable where you load Flowbite only when the browser client is available:

https://flowbite.com/docs/getting-started/angular/#using-with-angular-ssr

Cheers, Zoltan