Error ini terjadi saat menggunakan Laravel Inertia React. Saat menjalankan script ssr.mjs dan ketika kita mengakses halaman, maka pada console akan muncul error ReferenceError: window is not defined. Hal ini terjadi karena pada halaman yang kita akses, node js akan memanggil variable window. Variabel window ini berjalan dengan baik ketika di browser. Namun pada node js, fungsi ini tidak diketahui, atau undefined. Sehingga kita perlu mendeklarasikan variable window pada aplikasi kita.

Sebagai contoh, berikut ini adalah kode saya

import { useEffect, useState } from 'react';

const useWindowSize = () => {
  const [windowSize, setWindowSize] = useState({
    width: undefined,
    height: undefined,
  });

  useEffect(() => {
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    window.addEventListener('resize', handleResize);

    handleResize();

    return () => window.removeEventListener('resize', handleResize);
  }, [window.innerHeight, window.innerWidth]);

  return windowSize;
};

export default useWindowSize;

Kode saya di atas merupakan custom hook yang digunakan untuk mengambil ukuran window secara realtime. Pada kode ini lah terdapat error "window is not defined" jika saya menjalankan ssr.mjs.

Solusi :

Solusi paling mudah adalah dengan menggunakan package global.

Install package menggunakan package manager favorit kalian

// NPM
npm install global

// Yarn
yarn add global

// PNPM
pnpm add global

Kemudian import package tersebut ke dalam kode kita

import { useEffect, useState } from 'react';
import window from 'global/window'; // add this

const useWindowSize = () => {
  const [windowSize, setWindowSize] = useState({
    width: undefined,
    height: undefined,
  });

  useEffect(() => {
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    window.addEventListener('resize', handleResize);

    handleResize();

    return () => window.removeEventListener('resize', handleResize);
  }, [window.innerHeight, window.innerWidth]);

  return windowSize;
};

export default useWindowSize;

Setelah selesai mengimport package global, maka kita telah berhasil menghilangkan error ReferenceError: window is not defined.