ReferenceError: window is not defined エラー

はじめに

オリジナルアプリ開発の実装で、出会ってしまったエラーを今回は紹介します！笑
ブラウザ環境のライブラリ使う場合、参考になると思います！

前提

意図的にSSRも同じファイルに記述する場合にの内容となります！
それ以外は、基本"use client"; (クライアントサイドのみで実行)付けとけば解決できるかと思います。

ReferenceError: window is not defined エラー

ReferenceError: window is not defined エラー
このエラーは、Next.jsのサーバーサイドレンダリング(SSR)の環境で、サーバー側でブラウザ専用のオブジェクトやAPI（例やwindow）documentにアクセスしようとした際に発生します。
以下、エラーが起きる例(画像の拡張子変換と画像圧縮処理のコード)

// heic2any と browser-image-compression を動的にインポート
const importHeic2any = () => import('heic2any');
const importImageCompression = () => import('browser-image-compression');

const processImage = async (file) => {

  // HEIC 形式の画像の場合、heic2any を使用して変換
  if (file.type === 'image/heic' || file.type === 'image/heif') {
    try {
      const heic2any = (await importHeic2any()).default;
      const convertedBlob = await heic2any({ blob: file, toType: 'image/jpeg' });

      const convertedFile = new File([convertedBlob], file.name.replace(/\.\w+$/, '.jpg'), { type: 'image/jpeg' });
      // 変換後のファイルを処理
      console.log('Converted file:', convertedFile);
    } catch (error) {
      console.error('HEIC 変換エラー:', error);
    }
  } else {

    // 他の画像形式の場合、browser-image-compression を使用して圧縮
    try {
      const imageCompression = (await importImageCompression()).default;

      const options = { maxSizeMB: 1, maxWidthOrHeight: 1024, useWebWorker: true };

      const compressedBlob = await imageCompression(file, options);

      const compressedFile = new File([compressedBlob], file.name, { type: file.type });

      // 圧縮後のファイルを処理
      console.log('Compressed file:', compressedFile);
    } catch (error) {
      console.error('画像圧縮エラー:', error);
    }
  }
}

問題のあるコードの部分

const importHeic2any = () => import('heic2any');
const importImageCompression = () => import('browser-image-compression');

heic2any と browser-image-compression は、ブラウザ専用のライブラリです。
これらを動的にインポートすることで、サーバーサイド側のエラーを防ぎ、ブラウザ側で実行できるようになります。
しかし、これらの動的インポートのタイミングによっては、サーバーサイドでwindowオブジェクトが未定義のままアクセスされ、ReferenceError: window is not definedというエラーが発生します。

解決方法

1. typeof window ! == “undefined“でチェックする。
   サーバーサイドでは、windowは定義されていないため、window使うコードの前に、windowが定義されているかをチェックする。
   以下、修正版

// heic2any と browser-image-compression を動的にインポート
const importHeic2any = () => import('heic2any');
const importImageCompression = () => import('browser-image-compression');

const processImage = async (file) => {
　　// ブラウザ側でのみ実行する処理

  // ここでサーバーサイドかブラウザかをチェック
  if (typeof window !== "undefined") {

    // HEIC 形式の画像の場合、heic2any を使用して変換
    if (file.type === 'image/heic' || file.type === 'image/heif') {
      try {
　　　　　const heic2any = (await importHeic2any()).default;
　　　　　const convertedBlob = await heic2any({ blob: file, toType: 'image/jpeg' });
        const convertedFile = new File([convertedBlob], file.name.replace(/\.\w+$/, '.jpg'), { type: 'image/jpeg' });

        // 変換後のファイルを処理
　　　　　console.log('Converted file:', convertedFile);

      } catch (error) {
        console.error('HEIC 変換エラー:', error);
      }
    } else {
      // 他の画像形式の場合、browser-image-compression を使用して圧縮
      try {
        const imageCompression = (await importImageCompression()).default;
        const options = { maxSizeMB: 1, maxWidthOrHeight: 1024, useWebWorker: true };
        const compressedBlob = await imageCompression(file, options);
        const compressedFile = new File([compressedBlob], file.name, { type: file.type });
        // 圧縮後のファイルを処理
        console.log('Compressed file:', compressedFile);
      } catch (error) {
        console.error('画像圧縮エラー:', error);
      }
    }
  } else {
    console.log("サーバー側のコードは画像を処理できません。");
  }
}

2. useEffect 内での実行

useEffect でクライアントサイド処理を分けることで、クライアントのみ実行されるので、ブラウザ関連の処理を行えます。

以下、例

import React, { useEffect } from "react";

// heic2any と browser-image-compression を動的にインポート
const importHeic2any = () => import("heic2any");
const importImageCompression = () => import("browser-image-compression");

const processImage = async (file) => {
  // ブラウザ側でのみ実行する処理
  if (typeof window !== "undefined") {  // サーバーサイドでの処理を避ける
    // HEIC 形式の画像の場合、heic2any を使用して変換
    if (file.type === 'image/heic' || file.type === 'image/heif') {
      try {
        const heic2any = (await importHeic2any()).default;
        const convertedBlob = await heic2any({ blob: file, toType: 'image/jpeg' });

        const convertedFile = new File([convertedBlob], file.name.replace(/\.\w+$/, '.jpg'), { type: 'image/jpeg' });
        // 変換後のファイルを処理
        console.log('Converted file:', convertedFile);
      } catch (error) {
        console.error('HEIC 変換エラー:', error);
      }
    } else {
      // 他の画像形式の場合、browser-image-compression を使用して圧縮
      try {
        const imageCompression = (await importImageCompression()).default;

        const options = { maxSizeMB: 1, maxWidthOrHeight: 1024, useWebWorker: true };

        const compressedBlob = await imageCompression(file, options);

        const compressedFile = new File([compressedBlob], file.name, { type: file.type });

        // 圧縮後のファイルを処理
        console.log('Compressed file:', compressedFile);
      } catch (error) {
        console.error('画像圧縮エラー:', error);
      }
    }
  } else {
    console.log("サーバー側のコードは画像を処理できません。");
  }
}

// useEffect内での実行処理を追加
const MyComponent = () => {
  useEffect(() => {
    // ここで processImage を呼び出す
    const file = { type: 'image/jpeg', name: 'test-image.jpg' };  // サンプルファイル
    processImage(file);
  }, []);

  return (
    <div>
      <p>画像処理を実行するコンポーネント</p>
    </div>
  );
};

export default MyComponent;

補足

ちなみにheic2anyは、iosデバイスの画像を変換し、ブラウザで表示を可能にできるJavaScriptライブラリ。
browser-image-compressionは、画像の圧縮処理のJavaScriptライブラリとなります。

おわり

今回は、サーバー側でブラウザ専用のオブジェクトなどにアクセスする際のエラーについての内容でした！
ブラウザ環境(クライアント側)前提とするライブラリを使用する際には、注意が必要ってことです！
ちなみに自分は、useEffectの方使ってみました！
参考になれば幸いです！