Remote.js fetch changes cause issue with previously working code in browser

[mcgear]

Checked other resources

• I added a very descriptive title to this issue.
• I searched the LangChain.js documentation with the integrated search.
• I used the GitHub search to find a similar question and didn't find it.
• I am sure that this is a bug in LangChain.js rather than my code.
• The bug is not resolved by updating to the latest stable version of LangChain (or the specific integration package).

Example Code

useEffect(() => {
    const circuit = props.chats[activeChat!]
      ? new RemoteRunnable({
        url: `${props.root}${props.chats[activeChat!].CircuitLookup}`,
        options: {
          headers: { Authorization: `Bearer ${props.jwt}` },
        },
      })
      : undefined;

    setCircuit(circuit);
  }, [activeChat, chats]);

Error Message and Stack Trace (if applicable)

remote.js:284 Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation
at RemoteRunnable.post (remote.js:284:21)
at RemoteRunnable._invoke (remote.js:298:37)
at RemoteRunnable._callWithConfig (base.js:216:34)
at async work (Thinky.tsx:200:21)

Description

Previously this code was working, but in updating to latest langchain, i see that there is a new implementation of Remote.js that includes the ability to override the fetchImplementation:

  fetchImplementation: (...args: any[]) => any = fetch;

 Object.defineProperty(this, "fetchImplementation", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: fetch
        });

This seems to have a similar issue:
https://stackoverflow.com/questions/44720448/fetch-typeerror-failed-to-execute-fetch-on-window-illegal-invocation

So it's seems the issue comes from taking fetch, in a browser context, and attaching it to a different base context, other than window.

I think the issue could be solved by adjusted the base setting of fetchImplementation to:

  fetchImplementation: (...args: any[]) => any = (args) => fetch(args);

System Info

Deno 1.45.5
langchainjs/core 0.2.23

[dosubot]

To resolve the "Illegal invocation" error in your code, you need to ensure that the fetch function retains its correct context by explicitly binding it to the window object. Here is how you can adjust your code:

useEffect(() => {
    const circuit = props.chats[activeChat!]
      ? new RemoteRunnable({
        url: `${props.root}${props.chats[activeChat!].CircuitLookup}`,
        options: {
          headers: { Authorization: `Bearer ${props.jwt}` },
        },
        fetch: fetch.bind(window), // Ensure fetch is bound correctly
      })
      : undefined;

    setCircuit(circuit);
  }, [activeChat, chats]);

By binding fetch to window, you ensure that the context is preserved, preventing the "Illegal invocation" error ^[1].

To continue talking to Dosu, mention @dosu.

[jacoblee93]

Ah I see - sorry for missing this issue! Will get this merged and shipped tomorrow.