window not defined + document `"type": "module"` requirement.

[fffiloni]

Describe the bug

Hello !

I'm a working on a simple Node.js express app, which can call the gradio client to play with space apis. I encountered several errors about "EventSource" not defined, and "window" not defined, errors i have been able to solve :)

Here's the workaround for @gradio/client 0.10.1 and Node.js v18.16.0 Note that we are workin with ES6 Syntax.

#1 First make sure in your package.json file you add

"type": "module"

#2 About EventSource

npm install eventsource

then in your server.js add

import { createRequire } from 'node:module'
const require = createRequire(import.meta.url);
global.EventSource = require('eventsource');

then in file /node_modules/@gradio/client/dist/index.js line 744 replace: replace:

eventSource = EventSource_factory(url);

by adding .toString() to url arg:

eventSource = EventSource_factory(url.toString());

—

same operation to line 1060

event_stream = EventSource_factory(url);

by adding .toString() to url arg:

event_stream = EventSource_factory(url.toString());

— #3 About window not defined

It's not finished, now you will get window not defined event, so in file /node_modules/@gradio/client/dist/index.js:1078 line 1078

replace:

let fn2 = event_callbacks[event_id];
window.setTimeout(fn2, 0, _data);

by :

let fn2 = event_callbacks[event_id];
if (typeof window !== "undefined") {

  window.setTimeout(fn2, 0, _data);
} else {
  setTimeout(fn2, 0, _data);
}

— So now in your main server.js, your code should be like this:

import { client } from "@gradio/client";
import { createRequire } from 'node:module'
const require = createRequire(import.meta.url);
global.EventSource = require('eventsource');

async function test_api(){
  const grapi_test = await client("gradio/hello_world");
  const apitest_result = await grapi_test.predict("/predict", [
    "John",
  ]);
  console.log(apitest_result.data);
}

test_api()

It should now work, as it works on my hand, console should log: [ 'Hello John!' ]

Have you searched existing issues? 🔎

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

Reproduction

import { client } from "@gradio/client";

async function test_api(){
  const grapi_test = await client("gradio/hello_world");
  const apitest_result = await grapi_test.predict("/predict", [
    "John",
  ]);
  console.log(apitest_result.data);
}

test_api()

Screenshot

No response

Logs

/node_modules/@gradio/client/dist/index.js:1209
  (...args) => new EventSource(...args)
               ^

ReferenceError: EventSource is not defined

/node_modules/@gradio/client/dist/index.js:1078
            window.setTimeout(fn2, 0, _data);
            ^

ReferenceError: window is not defined

System Info

@gradio/client 0.10.1 Node.js v18.16.0

Severity

I can work around it

[fffiloni]

Note: this solution will work while calling public space API.

Still does not work with private spaces

[zishanahmed08]

@fffiloni Is there any solution to get it running with private spaces. Instead of Node.js , i tried with https://deno.land/ ,but i get different errors

[pngwn]

We have an issue about the second point.

I'll keep this open for points 1 and 2 and will change the title.

[mananchawla2005]

Hey adding to that, there is a error while using with frameworks like nuxt as well. what to do for that cases?

[pngwn]

We will look into these environment issues. I think they are all related.