Importing Supabase Client breaks React Page [duplicate]

I'm trying to set up a simple frontend to interact with my Supabase database. I'm following the built in React tutorial but when I try to import the client.js script the entire page goes blank. I deviated from the guide a little bit by setting up the query in a component script instead of App.jsx but I don't think it should break it. I've managed to figure out its the import { supabase } line in listData.jsx that what causes it to break but I couldn't figure it out past that. No errors have been thrown in the console so I've been struggling to figure out what exactly is wrong. Does anyone know what is wrong so I can fix it?

App.jsx

import { useState } from 'react'
import LevelInput from './level_input'
import ListData from './listData'
import './App.css'
function App() {
const [count, setCount] = useState(0)
return (
<>
<h1>BDDL Supabase Test</h1>
<div class="vbox">
<LevelInput />
<ListData />
</div>
</>
)
}
export default App

client.js

import { createClient } from "@supabase/supabase-js";
const supabaseURL= import.meta.env.SUPABASE_URL
const anonKey = import.meta.env.ANON_KEY
const supabase = createClient(supabaseURL, anonKey)
export default supabase

listData.jsx

import { useEffect, useState } from "react";
// import { supabase } from './lib/client.js'
function ListData() {
// const [levels, setLevels] = useState([])
// useEffect(() => {
//     getLevels()

// }, [])
// async function getLevels() {
//     const { data, error } = await supabase.from('levels').select()
//     if (error) {
//         console.error(error)
//         return
//     }
//     setLevels(data)
// }
return (
<div class="container">
</div>
)
}
export default ListData