🍆

Supabase CLIで生成した型ファイルが原因でNext.jsでビルドに失敗するときの対処

2023/03/19に公開

Supabase CLIでは、 supabase gen types typescript ~~~ で型ファイルを生成することができます。

Next.jsでビルドする際に、この生成したファイルが原因でビルドが中断することがあります。

問題を解決する

型ファイルをエディタで開き、文字コードを「UTF-8」に変換してください。(なぜかUTF-16になっている...。)
これだけで解決できます。

ビルド時に自動的にUTF-8に変換してくれるようにする

iconv-liteとchardetをインストールする
npm install iconv-lite chardet

iconv-liteは文字コードの変換ができるnpmパッケージ。
chardetはファイルの文字コードを取得できるnpmパッケージ。

convertSupabaseSchema.js
const fs = require("fs/promises");
const path = require("path");
const iconv = require("iconv-lite");
const chardet = require("chardet");

// Supabaseの型ファイルがある場所を指定します
const inputFile = path.resolve("./src/components/Types/Supabase/schema.ts");
// どこに出力するかを指定します。(ここでは同じ場所に上書き保存します。)
const outputFile = path.resolve("./src/components/Types/Supabase/schema.ts");

(async () => {
  const inputData = await fs.readFile(inputFile);

  // 文字コードがUTF-16 LEのときにUTF-8に変換処理をを行う
  // Windows環境のSupabase CLIではUTF-16 LEとして型ファイルが生成されるとのことなので。
  if (chardet.detect(inputData) === "UTF-16LE") {
    const outputData = iconv.decode(inputData, "utf16-le", "utf-8");
    await fs.writeFile(outputFile, outputData, "utf-8");
  }
})();
package.json
{
  "scripts": {
    "prebuild": "node convertSupabaseSchema.js"
  }
}

※ prebuild は npm run build を実行すると自動的に事前に実行してくれるもの。Node.jsの標準的な機能です。

あとは普通に npm run build でNext.jsのプロジェクトをビルドすればOKです。
必要に応じてSupabaseの型ファイルを変換してくれるので、Supabaseの型ファイルが原因でビルドが停止するストレスから解放されます!

Discussion