Getting "global is not defined" after configuring supabase

Question

I did everything Supabase gave in the introduction step by step, but when I want to get a log, it says global is not defined.

import { useEffect, useState } from "react";
import { createClient } from "@supabase/supabase-js";

const supabase = createClient(
  "https://vgxjborpaajqpujjqomb.supabase.co",
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InZneGpib3JwYWFqcXB1ampxb21iIiwicm9sZSI6ImFub24iLCJpYXQiOjE2OTI3Nzc5MzAsImV4cCI6MjAwODM1MzkzMH0.hx8JX58Tc3nNwNphWrS7VZg3Jj5wFyDWyx8kkTJ1Ors"
);

function App() {
  const [countries, setCountries] = useState([]);

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

  async function getCountries() {
    const { data } = await supabase.from("countries").select();
    setCountries(data);
  }

  return (
    <ul>
      {countries.map((country) => (
        <li key={country.name}>{country.name}</li>
      ))}
    </ul>
  );
}

export default App;

As you can see, it gives me a log that this error exists

enter image description here

I want to log the supbase to see if the front end is connected to the backend or not