`gradio/client` does not work in non-node, non-browser environments - React native

[maksymalist]

Describe the bug

After installing the @gradio/client package using expo install @gradio/client I get the following error:

The package at "node_modules/@gradio/client/dist/index.js" attempted to import the Node standard library module "node:buffer".
It failed because the native React runtime does not include the Node standard library.

Is there an existing issue for this?

• [X] I have searched the existing issues

Reproduction

1. Install npm -> https://nodejs.org/en
2. Install expo cli : npm install -g expo-cli
3. Create a new app : expo init test-app
4. Choose the tabs (Typescript) template
5. Install Gradio Client : expo install @gradio/client
6. Start the app : "yarn web"

By following these steps you should end up getting the same error as me as seen in the screen shot below only I was using the ios simulator.

Screenshot

Logs

Logs for your project will appear below. Press Ctrl+C to exit.
iOS Bundling failed 681ms
The package at "node_modules/@gradio/client/dist/index.js" attempted to import the Node standard library module "node:buffer".
It failed because the native React runtime does not include the Node standard library.

System Info

Gradio Version: 0.1.1 | OS: MacOS ventura 13.0.1 | ** using expo (https://expo.dev/) **

Severity

blocking all usage of gradio

[levelingup]

this is also an issue if trying to use it in nextjs environment. .

[maksymalist]

It works when you use it in the api folder

[abinashbordoloi]

It works when you use it in the api folder

Can you elaborate a bit about the fix, Please? for react native?

[maksymalist]

The way I got around it was by creating a NextJS app to act as a middle man api that uses the @gradio/client library, to which I would send requests from the mobile app. The @gradio/client library seems to work just fine on NextJS and on other node based framework but not with expo. For now, this janky solution seems to work pretty well; if you are planning to create an api for your app that's the solution I suggest. Unfortunately I haven't found any other way around it :(. Best of luck to you!

[abinashbordoloi]

Thanks!!! Same here my approach is also the same as you mentioned :(..

[lakesare]

@pngwn, did we close this issue because it's supposed to be fixed?

As far as I see we still cannot call gradio api from the browser, we get

The package "http" wasn't found on the file system but is built into node. Are you trying to
  bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

for http and around a dozen other libraries if we try.

[pngwn]

The client definitely works in the browser as it powers the gradio frontend.

Do you have a reproduction (including build step)? It could be an issue with how it is being bundled.

[lakesare]

@pngwn, thanks for a fast response.

Steps to reproduce:

1. yarn add @gradio/client
2. In a file, write import { Client } from "@gradio/client";
3. Run node esbuild.watch.config.js, where config is the following: https://github.com/Paper-Proof/paperproof/blob/main/app/esbuild.watch.config.js.

Result (first few errors, others are similar):

✘ [ERROR] Could not resolve "stream"

    node_modules/@gradio/client/dist/wrapper-CviSselG.js:1:23:
      1 │ import require$$0 from "stream";
        ╵                        ~~~~~~~~

  The package "stream" wasn't found on the file system but is built into node. Are you trying to
  bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

✘ [ERROR] Could not resolve "zlib"

    node_modules/@gradio/client/dist/wrapper-CviSselG.js:2:25:
      2 │ import require$$0$2 from "zlib";
        ╵                          ~~~~~~

  The package "zlib" wasn't found on the file system but is built into node. Are you trying to
  bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

[pngwn]

This is interesting. I can at least explain the purpose of those imports.

The node built ins are imported by a dependency that we use to polyfill Websockets in node. However, that package is dynamically imported only in a node environment but it seems that esbuild does not like them.

Ideally it should just leave them as external and not try to resolve them. I'll take a look and see if there is a way around it.

Edit: for clarity we don't use websockets anymore but we keep this logic in for backwards compatibility reasons.

[pngwn]

One thing we could do is provide a dedicated browser build with its own export / entry point but the package is designed to be platform agnostic (as much as possible).

[pngwn]

For the time being at least, you can use the external option to ignore the node built ins: https://esbuild.github.io/api/#external

[lakesare]

@pngwn, thanks for a tip, adding the following to my esbuild config worked:

external: ['stream', 'zlib', 'url', 'http', 'events', 'crypto', 'tls', 'https', 'net', 'buffer', 'os', 'path', 'fs'],