How can I access bucket elements from Google Cloud Storage using React/Vite?

I am trying to list all the items in my bucket using React with vite and I don’t understand why I am unable to do it. I am new to web-development in general, so a lot of the Docs tutorials are hard to follow. I am trying to access images from my GCS bucket and programatically list them in my react app.

I have used npm install @google-cloud/storage and I am trying to import it in my file like so: import { Storage } from "@google-cloud/storage";

however, I am getting an error:

TypeError: Cannot read properties of undefined (reading 'from')
    at node_modules/safe-buffer/index.js (index.js:12:12)
    at __require (chunk-5WRI5ZAA.js?v=bf5a1ca7:8:50)
    at node_modules/ecdsa-sig-formatter/src/ecdsa-sig-formatter.js (ecdsa-sig-formatter.js:3:14)
    at __require (chunk-5WRI5ZAA.js?v=bf5a1ca7:8:50)
    at node_modules/google-auth-library/build/src/auth/oauth2client.js (oauth2client.js:20:21)
    at __require (chunk-5WRI5ZAA.js?v=bf5a1ca7:8:50)
    at node_modules/google-auth-library/build/src/auth/computeclient.js (computeclient.js:19:24)
    at __require (chunk-5WRI5ZAA.js?v=bf5a1ca7:8:50)
    at node_modules/google-auth-library/build/src/auth/googleauth.js (googleauth.js:24:25)
    at __require (chunk-5WRI5ZAA.js?v=bf5a1ca7:8:50)

I am very confused and have tried to use:
import * as Storage from '@google-cloud/storage' ,
import * as storage from '@google-cloud/storage'; const client = new storage.Storage(); , and

import * as storageModule from "@google-cloud/storage";
const { Storage } = storageModule;
const storage = new Storage();

but they give the same error which makes me think that I didn’t install GCS properly. I tried using npm install --save @google-cloud/storage as well but no change.

I also did npm install and re-run the application but nothing happened.

This is my simple code:

//getImages.js
import { Storage } from "@google-cloud/storage";

const bucketName = "my-bucket-name";
const storage = new Storage({
  keyFilename: "path/to/my/service-account.json",
});

export async function listFiles() {
  // Lists files in the bucket
  try {
    const [files] = await storage.bucket(bucketName).getFiles();

    console.log("Files:");
    files.forEach((file) => {
      console.log(file.name);
    });
  } catch (error) {
    console.error("Error listing files:", error);
  }
}

and this is my component:

import "./Gallery.css";
import { listFiles } from "../../utils/api/getImages";
import { useEffect, useState } from "react";

const Gallery = () => {
  const [images, setImages] = useState([]);

  useEffect(() => {
    async function fetchImages() {
      try {
        const urls = await listFiles();
        console.log(urls);
        setImages(urls);
      } catch (error) {
        console.error(error);
      }
    }

    fetchImages();
  }, []);

  console.log(images);
  return (
    <>
      <div>
        <h2>Gallery</h2>
        <div className="image-grid">
          {images.map((url, index) => (
            <img
              key={index}
              src={url}
              alt={`Image ${index}`}
              className="gallery-image"
            />
          ))}
        </div>
      </div>
    </>
  );
};

export default Gallery;

here are my package.json:

{
  "name": "website",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@google-cloud/storage": "^7.12.0",
    "gsap": "^3.12.5",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react": "^7.34.3",
    "eslint-plugin-react-hooks": "^4.6.2",
    "eslint-plugin-react-refresh": "^0.4.7",
    "react-router-dom": "^6.26.0",
    "vite": "^5.3.4"
  }
}

and package-lock.json:

{
  "name": "website",
  "version": "0.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "website",
      "version": "0.0.0",
      "dependencies": {
        "@google-cloud/storage": "^7.12.0",
        "gsap": "^3.12.5",
        "react": "^18.3.1",
        "react-dom": "^18.3.1"
      },
      "devDependencies": {
        "@types/react": "^18.3.3",
        "@types/react-dom": "^18.3.0",
        "@vitejs/plugin-react": "^4.3.1",
        "eslint": "^8.57.0",
        "eslint-plugin-react": "^7.34.3",
        "eslint-plugin-react-hooks": "^4.6.2",
        "eslint-plugin-react-refresh": "^0.4.7",
        "react-router-dom": "^6.26.0",
        "vite": "^5.3.4"
      }
    }, 
...

and vite.config.js if needed:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

Let me know if some of these are not needed (and why if possible) and I’ll delete to make the question better.

Any help and guidance would be appreciated, if I have understood something wrong, please explain why and how so that I can properly fix my code!

Thank you!