Error using Gradio JavaScript client with Vite.js

[Raf-sns]

Describe the bug

Hi, I'm trying the Gradio JavaScript client with Vite.js. I created a new project with vite/JavaScript/Vanilla I ran the command npm i @gradio/client I ran the project build with the command npm install I created a main.js file where I copied a basic example from the documentation:

main.js

import './style.css'
import javascriptLogo from './javascript.svg'
import viteLogo from '/vite.svg'
import { Client, handle_file } from "@gradio/client";

const response = await fetch(
    "https://github.com/audio-samples/audio-samples.github.io/raw/master/samples/wav/ted_speakers/SalmanKhan/sample-1.wav"
);
const audio_file = await response.blob();

const app = await Client.connect("abidlabs/whisper");
const transcription = await app.predict("/predict", [handle_file(audio_file)]);

console.log(transcription.data);

I get the following error: Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/@gradio_client.js?v=0cabf73f' does not provide an export named 'handle_file' (at main.js? [sm]:4:18)

I am new to Node.js, Thank you for your help or comments. Sincerely, Raf

Have you searched existing issues? 🔎

• [X] I have searched and found no existing issues

Reproduction

import gradio as gr

Screenshot

No response

Logs

No response

System Info

npm i -D @gradio/client

Severity

Blocking usage of gradio

[pngwn]

Can you please paste your package.json and vite config file in a reply (if you have them).

Thanks.

[Raf-sns]

Hi, Thanks for your help. My package.json file :

{
  "name": "gradio",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@gradio/client": "^0.17.0",
    "vite": "^5.4.1"
  }
}

I don't have some vite.config.js file. Regards, Raf