RemoteRunnable within React Error

[nacartwright]

Checked other resources

• I added a very descriptive title to this question.
• I searched the LangChain documentation with the integrated search.
• I used the GitHub search to find a similar question and didn't find it.

Commit to Help

• I commit to help with one of those options 👆

Example Code

import { RemoteRunnable } from "langchain/runnables/remote";

 useEffect(() => {
        remoteChain.current = new RemoteRunnable({
            url: "/api/product",
        });
    }, []);

    const makeQuery = async (product) => {
        let response = await remoteChain.current.invoke({
            product: JSON.stringify(product),
        });

        return response;
    };

Description

Whenever I try to execute the RemoteRunnable within my React app I'm getting the following error:

ERROR
Failed to execute 'fetch' on 'Window': Illegal invocation
TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation
at _0x2e8d63. [as fetchImplementation] (eval at (http://localhost:3001/:1:76), :1:42106)
at RemoteRunnable.post (http://localhost:3001/static/js/bundle.js:73447:17)
at RemoteRunnable._invoke (http://localhost:3001/static/js/bundle.js:73461:33)
at RemoteRunnable._callWithConfig (http://localhost:3001/static/js/bundle.js:70618:28)
at async makeQuery (http://localhost:3001/static/js/bundle.js:858:20)
at async reader.onload (http://localhost:3001/static/js/bundle.js:883:26)

System Info

"@material-tailwind/react": "^2.1.8",
"@uiw/react-codemirror": "latest",
"daisyui": "^4.6.0",
"langchain": "latest",
"langchain-core": "latest",
"react": "^18.2.0",
"react-daisyui": "^5.0.0",
"react-dom": "^18.2.0",
"react-markdown": "^9.0.1",
"react-router-dom": "^6.21.3",
"react-scripts": "5.0.1"

[dosubot[bot]]

To resolve the "Failed to execute 'fetch' on 'Window': Illegal invocation" error when trying to execute RemoteRunnable within your React application, ensure that the fetchImplementation is correctly bound to the RemoteRunnable class. The error typically occurs when the fetch function loses its context.

In your code, you need to bind the fetch function to the window object. Here is an example of how you can instantiate RemoteRunnable with a properly bound fetch function:

import { RemoteRunnable } from "langchain/runnables/remote";
import { useEffect, useRef } from "react";

const MyComponent = () => {
    const remoteChain = useRef(null);

    useEffect(() => {
        // Ensure fetch is bound correctly
        const fetchBound = fetch.bind(window);

        remoteChain.current = new RemoteRunnable({
            url: "/api/product",
            fetch: fetchBound, // Use the bound fetch function
        });
    }, []);

    const makeQuery = async (product) => {
        let response = await remoteChain.current.invoke({
            product: JSON.stringify(product),
        });

        return response;
    };

    // Rest of your component code
};

export default MyComponent;

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

To continue talking to Dosu, mention @dosu.

[nacartwright]

That was easy. Thanks!

[dosubot[bot]]

You're welcome! If you have any more questions or run into any other issues, feel free to ask. Happy coding!

To continue talking to Dosu, mention @dosu.