supabaseのデータベース読み込みが失敗する

はじめに

supabaseを使用して、データベースを読み込もうと思ったのですがsupabaseのURL/rest/v1/テーブル名?select=*401 (Unauthorized) のよう認証エラーがでたので解決した経緯をまとめました。

問題

supabaseのクライアント設定(URL、KEY）は合っているはずなのに、認証エラー(401)が出る。
.env ファイルはvite環境なので以下の通りで合っているし、、、

.env

VITE_SUPABASE_URL = supabaseのURL
VITE_SUPABASE_ANON_KEY = supabaseのAPI KEY

Uncaught ReferenceError: process is not definedが表示されるを参考に vite.config.js を以下のように設定もしている。。

vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import env from "vite-plugin-env-compatible";

export default defineConfig({
    plugins: [react(), env({ prefix: "VITE", mountedPath: "process.env" })],
});

クライアント設定をしている部分は下記

supabaseFunctions.js

import { createClient } from "@supabase/supabase-js";

const supabaseUrl = process.env.VITE_SUPABASE_URL;
const supabaseKey = process.env.VITE_SUPABASE_KEY;

export const supabase = createClient(supabaseUrl, supabaseKey);

なぜだ、、

解決方法

npm i vite-plugin-env-compatible をするのが抜けていました。

vite.config.js を手書きでコピーしたのを思い出し、見返した際に
インストールをしたか怪しかったので実行すると直りました。
なぜこのコマンドが必要なのかはこちらを参照ください。
https://qiita.com/shunii/items/b00d556f3730e6b88708

おわりに

一つ一つ確実に進めなければ、失敗の原因を突き止めるのも遅くなりますね。

参考

https://qiita.com/gantarooou_js/items/6fc638fc27feb1246bea
https://qiita.com/shunii/items/b00d556f3730e6b88708