DEV Community

Kazutora Hattori
Kazutora Hattori

Posted on

Cause and solution of the Supabase "supabaseKey is required" error [Vite + React]

#supabase #react #webdev #programming

Introduction

When developing with React (Vite) and Supabase,
the following error appeared in the console.

Uncaught Error: supabaseKey is required.
Enter fullscreen mode Exit fullscreen mode

This error was caused by the Supabase key not being loaded.
The cause was that the variable name in the .env file did not match the code.

Cause

The key names in .env.local and supabaseClient.ts were different.

.env.local (incorrect) 

VITE_SUPABASE_API_KEY=xxxxx

// supabaseClient.ts (ANON_KEY was referenced here)
const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
Enter fullscreen mode Exit fullscreen mode

As a result, superbaseKey became undefined, causing an error.

Solution

Unify .env.local as follows.

VITE_SUPABASE_URL=https://xxxxx.supabase.co
VITE_SUPABASE_ANON_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Enter fullscreen mode Exit fullscreen mode

supabaseClient.ts is as follows.

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

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseKey);
Enter fullscreen mode Exit fullscreen mode

After modifying .env.local, be sure to restart Vite.

npm run dev
Enter fullscreen mode Exit fullscreen mode

The cause of this issue was a mismatch between the .env and code key names.

When fixing this issue, keep the following three points in mind:

Make sure the .env and code key names are consistent.

Do not use spaces or "before or after=`.

Be sure to restart Vite after making the changes.

Top comments (0)