Integrating Supabase with React is usually straightforward, but encountering a completely blank white screen with no console errors after importing your Supabase client can be baffling. If un-commenting import { supabase } from './client.js' crashes your React app, you are likely dealing with two very common frontend setup pitfalls: import/export mismatches and Vite environment variable naming conventions.

The Core Problems

Looking closely at the implementation, there are two primary reasons why the component breaks upon import:

  1. Default vs. Named Export Mismatch: In client.js, the instance is exported using export default supabase. However, in listData.jsx, it is imported using a named import syntax: import { supabase } from .... Because supabase resolves to undefined, attempting to access properties or methods on it crashes React during component initialization.
  2. Missing VITE_ Prefix in Environment Variables: Since the code uses import.meta.env, it is built with Vite. Vite explicitly ignores any environment variables that do not start with the VITE_ prefix to prevent accidentally leaking sensitive keys to the browser. As a result, supabaseURL and anonKey resolve to undefined, which throws a runtime exception inside createClient() before the page can render.

Step-by-Step Solution

1. Fix Environment Variables in .env

Ensure your environment variables inside your .env (or .env.local) file start with the VITE_ prefix:

VITE_SUPABASE_URL=https://your-project-id.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-public-key

2. Update client.js

Update client.js to read the newly prefixed variables and either use a named export or match your default export.

Here is the recommended approach using a named export:

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

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

if (!supabaseUrl || !supabaseAnonKey) {
  throw new Error('Supabase environment variables are missing.');
}

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

Note: Adding a check for missing environment variables helps surface configuration issues immediately in your browser console rather than silently rendering a blank screen.

3. Correct the Import in listData.jsx

Now that supabase is exported as a named constant, your import statement will work as expected. Also remember to use className instead of class in JSX:

import { useEffect, useState } from 'react';
import { supabase } from './client'; // Ensure the path matches your project structure

function ListData() {
  const [levels, setLevels] = useState([]);

  useEffect(() => {
    getLevels();
  }, []);

  async function getLevels() {
    const { data, error } = await supabase.from('levels').select();

    if (error) {
      console.error('Error fetching levels:', error);
      return;
    }

    setLevels(data || []);
  }

  return (
    <div className="container">
      <ul>
        {levels.map((level) => (
          <li key={level.id}>{level.name || JSON.stringify(level)}</li>
        ))}
      </ul>
    </div>
  );
}

export default ListData;

Summary

When an import causes a blank screen without clear warnings in React:

  • Check your bundler's environment variable naming rules (e.g., VITE_ for Vite, REACT_APP_ for Create React App).
  • Verify that your export default and export const match the corresponding import name or import { name } syntax.
  • Restart your development server (npm run dev) after editing .env files so Vite can load the new variables into memory.