TypeError: Cannot set property WebSocket of #<Object> which has only a getter / Gradio App not working in NextJS

[TommeZ]

Describe the bug

I can't find anything that resolves my specific issue.

I'm trying to make a fetch request to my HuggingFace space via the Gradio app on my NextJS project, but I'm getting the following error:

TypeError: Cannot set property WebSocket of # which has only a getter
at eval (webpack-internal:///(rsc)/./node_modules/@gradio/client/dist/index.js:282:34)

• error node_modules@gradio\client\dist\index.js (271:24) @ eval
• error unhandledRejection: Error [TypeError]: Cannot set property WebSocket of # which has only a getter
  at eval (webpack-internal:///(rsc)/./node_modules/@gradio/client/dist/index.js:282:34) {
  digest: undefined
  }

  Does anyone know if there's a way to resolve this, or know what's going on here that I can fix?

  Have you searched existing issues? 🔎

  • I have searched and found no existing issues

  Reproduction

  For private reasons, I have removed the names of the actual response picture and Hugging Face space.

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

  const HF_ACCESS_TOKEN = process.env.HF_ACCESS_TOKEN

  export default async function getDetections() {

  const response = await fetch("jpg");
  const exampleImage = await response.blob();
  
  const app = await client("HF_Name/MLDetector", { hf_token: HF_ACCESS_TOKEN });
  
  const result = await app.predict("/predict", [
      exampleImage, 	// blob in 'img' Image component
  ]);
  

  }`

  Screenshot

  

  Logs

  No response

  System Info

  Gradio Environment Information:
  Operating System:  Windows
  
  
  gradio version:  3.38.0   
  
  gradio Dependencies:      
    aiofiles: 23.1.0        
    aiohttp: 3.8.5
    altair: 5.0.1
    fastapi: 0.100.0        
    ffmpy: 0.3.1
    gradio-client: 0.2.10
    httpx: 0.24.1
    huggingface-hub: 0.16.4
    jinja2: 3.0.2
    markdown-it-py: 2.2.0
    markupsafe: 2.0.1
    matplotlib: 3.7.1
    mdit-py-plugins: 0.3.3
    numpy: 1.24.3
    orjson: 3.9.2
    packaging: 23.1
    pandas: 1.3.4
    pillow: 9.5.0
    pydantic: 1.10.11
    pydub: 0.25.1
    python-multipart: 0.0.6
    pyyaml: 6.0
    requests: 2.26.0
    semantic-version: 2.10.0
    typing-extensions: 4.7.1
    uvicorn: 0.23.1
    websockets: 11.0.3
  
  
  gradio_client version:  0.2.10
  
  gradio_client Dependencies:
    fsspec: 2023.6.0
    httpx: 0.24.1
    huggingface-hub: 0.16.4
    packaging: 23.1
    requests: 2.26.0
    typing-extensions: 4.7.1
    websockets: 11.0.3

  Severity

  Blocking usage of gradio

[pngwn]

Since this seems to to be an environment or framework specific issue, we will need a more complete reproduction. Could you put together a github repo with a default next app showing this problem? Preferably one that connects to a public HF space so we can run it.

Thanks.

[abidlabs]

Will close for now -- can reopen once we have a repro.

[piscopancer]

not fixed?

[TommeZ]

I'm currently working on a way to replicate the issue, by creating a new repo that doesn't use my company's code. Will share once complete. But it appears so far that fetching data from Hugging Face via Gradio generates this error when run inside a Next.js project.

[pngwn]

Do you have a dump of your system info? Is next running locally or deployed to vercel? If deployed, do you know if it is using the worker runtime or the lambda runtime?

[JimmyLv]

I also met this issue. running in my local env.

sw_vers
ProductName:		macOS
ProductVersion:		13.2.1

node -v
v18.14.2

npm show @gradio/client version
0.4.1

[TommeZ]

Do you have a dump of your system info? Is next running locally or deployed to vercel? If deployed, do you know if it is using the worker runtime or the lambda runtime?

I'm running it locally on VSCode. Windows 10

    "@gradio/client": "^0.3.1",
    "@types/node": "20.6.2",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "@types/ws": "^8.5.5",
    "autoprefixer": "10.4.15",
    "dotenv": "^16.3.1",
    "eslint": "8.49.0",
    "eslint-config-next": "13.4.19",
    "next": "13.4.19",
    "postcss": "8.4.29",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3",
    "typescript": "5.2.2",
    "web3": "^1.7.4",
    "ws": "^8.14.1"

[TommeZ]

I've replicated the issue at the following repo:

https://github.com/TommeZ/gradio-fetch

getTest().js makes a request to Hugging Face which returns the mentioned error, whereas it should be returning a string in the terminal.

[pngwn]

Thanks you!

[Jay2theWhy]

Found a similar issue here: vercel/next.js#41866 with a really simple fix

[JimmyLv]

@Jay2theWhy do you mean the fix: replaced axios with cross-fetch?

[Jay2theWhy]

@JimmyLv I mean this PR that was merged for the fix: spacebudz/lucid#108. From my testing, this resolved my conflict with my gradio app and next.js. I also ran the unit tests on this change and all passed.

[JimmyLv]

@Jay2theWhy cool, I just saw your PR #5840 good job! 👍

[dylan0356]

Still having this exact issue with NextJS implemented with hugging face.

[TommeZ]

I've just updated to the latest gradio/client via npm, and I'm receiving the same error still?

Not sure if I follow what the fix was and the subsequent steps to take.

[abidlabs]

We haven't released a new version of the client just yet, but will be soon (in the next day or so)

[Jay2theWhy]

@TommeZ You can follow this PR for when the next version is released: #5831
Should be resolved for v0.5.2

[TommeZ]

Thanks for your support gentlemen.

[JimmyLv]

Just upgraded to v0.5.2 but still running into this problem, I'm pretty sure global.Websocket is undefined but can't assign a value.

========global.Websocket======== undefined undefined

TypeError: Cannot set property WebSocket of #<Object> which has only a getter

Seems like the error might be due to trying to set a property on a frozen object or a non-extensible global object.

So my solution was to define let MyWebSocket with a new variable and the problem was solved!

let MyWebSocket
function api_factory(fetch_implementation, WebSocket_factory) {
   ...
     async function client2(app_reference, options = { normalise_files: true }) {
       if ((typeof window === "undefined" || !("WebSocket" in window)) && !globalThis.Websocket) {
          const ws = await import("./wrapper-6f348d45.js");
          NodeBlob = (await import("node:buffer")).Blob;
          MyWebSocket = ws.WebSocket;
        }
      }
}

const { post_data, upload_files, client, handle_blob } = api_factory(
  fetch,
  (...args) => new MyWebSocket(...args)
);

At the same time I realized that another solution is to customize a client using api_factory but not using the passed in WebSocket_factory in the constructor method, hahaha I don't know why.

[pngwn]

If it is undefined but can't be assigned then the client won't work without some other changes. I'll take a closer look at this as soon as I can.

[dylan0356]

Yeah even on the newest version I am still getting

TypeError: Cannot set property WebSocket of #<Object> which has only a getter at eval (webpack-internal:///(rsc)/./node_modules/@gradio/client/dist/index.js:289:34) ⨯ node_modules/@gradio/client/dist/index.js (278:24) @ eval ⨯ unhandledRejection: TypeError: Cannot set property WebSocket of #<Object> which has only a getter at eval (webpack-internal:///(rsc)/./node_modules/@gradio/client/dist/index.js:289:34) null ⨯ node_modules/@gradio/client/dist/index.js (278:24) @ eval ⨯ unhandledRejection: TypeError: Cannot set property WebSocket of #<Object> which has only a getter at eval (webpack-internal:///(rsc)/./node_modules/@gradio/client/dist/index.js:289:34) null

[odysseaspapadimas]

Any updates or workarounds on this?

[TommeZ]

Any update guys?

[cantonalex]

I also have the issue. Super annoying. Is there any version of node or nextjs where this isn't an issue?

[dylan0356]

Why was this closed it is still not fixed

[cantonalex]

@pngwn

[daz-williams]

I'm also getting the same issue. client version 0.10.1. Vanilla install of nextjs v14

import { client } from "@gradio/client";
try {
    const app = await client("http://localhost:7860/", {});
    const api_info = await app.view_api();
    console.log("Gradio Client info", api_info)
} catch (e) {
  console.log("Gradio Client error", e)
}

Error

TypeError: Cannot set property WebSocket of #<Object> which has only a getter
    at eval (webpack-internal:///(rsc)/./node_modules/@gradio/client/dist/index.js:403:34)
TypeError: Cannot set property WebSocket of #<Object> which has only a getter
    at eval (webpack-internal:///(rsc)/./node_modules/@gradio/client/dist/index.js:403:34)
 ⨯ node_modules/@gradio/client/dist/index.js (397:24) @ eval
 ⨯ unhandledRejection: TypeError: Cannot set property WebSocket of #<Object> which has only a getter
    at eval (webpack-internal:///(rsc)/./node_modules/@gradio/client/dist/index.js:403:34)
null
 ⨯ node_modules/@gradio/client/dist/index.js (397:24) @ eval
 ⨯ unhandledRejection: TypeError: Cannot set property WebSocket of #<Object> which has only a getter
    at eval (webpack-internal:///(rsc)/./node_modules/@gradio/client/dist/index.js:403:34)
null

@pngwn

[kosamit]

I also have the same issue.
gradio client version 0.12.2 and nextjs v14.

[Jay2theWhy]

Sorry guys, finally had some time to take a second look at this and figured out why my previous PR wasn't working as intended: #5840 . !global.Websocket needed to be !global.WebSocket. Apologies for the silly mistake. I'll have some free time in the next ~48 hours to submit a new PR and test the change locally, but if a team member could make the change before then, that would also be great. Again, apologies for not catching this earlier and blocking people's projects.

For anyone curious, this commit was the culprit

[pngwn]

Closed by #8118!