Async_hooks cannot be used in browser

[Hehongyuanlove]

I'm using chat_agent_executor_with_function_calling

The same code deno can run, but react cannot run in the browser

node -v

v21.7.0

expo

C:\xxxxx\node_modules@langchain\langgraph\dist\setup\async_local_storage.js:5 Uncaught TypeError: _async_hooks.AsyncLocalStorage is not a constructor
at initializeAsyncLocalStorageSingleton (C:\xxxxx\node_modules@langchain\langgraph\dist\setup\async_local_storage.js:5:2)
at new Pregel (C:\xxxxxt\node_modules@langchain\langgraph\dist\pregel\index.js:159:51)
at StateGraph.compile (C:\xxxxx\node_modules@langchain\langgraph\dist\graph\state.js:90:13)
at C:\xxxxx\page\tool\index.tsx:164:21
at loadModuleImplementation (C:\xxxxx\node_modules\metro-runtime\src\polyfills\require.js:282:19)
at guardedLoadModule (C:\xxxxx\node_modules\metro-runtime\src\polyfills\require.js:182:1)
at metroRequire (C:\xxxxx\node_modules\metro-runtime\src\polyfills\require.js:91:43)
at C:\xxxxx\App.js:4:44
at loadModuleImplementation (C:\xxxxx\node_modules\metro-runtime\src\polyfills\require.js:282:19)
at guardedLoadModule (C:\xxxxx\node_modules\metro-runtime\src\polyfills\require.js:182:1)

[bracesproul]

cc @jacoblee93 related to AsyncLocalStorage

[jacoblee93]

Oh shoot 😬

Will see if we can add web entrypoints to mitigate this I suppose.

[demchuk-alex]

Hey @jacoblee93 having the same issue, tring to use langgraphjs in react-native app, and nextjs.
Sorry for nudging is there any news or work arounds ?

[jacoblee93]

Thank you for nudging - will try my best to look this week!

[davidfant]

@jacoblee93 I'm also running into this. It happens when my NextJS imports a file that also imports @langchain/langgraph. I did this bc I shared types between frontend and backend, so frontend imported langgraph which otherwise was just used on the backend.

@demchuk-alex making the frontend only import my types and not langgraph solved my problem

[demchuk-alex]

Oh thanks @davidfant you mean do not import like Pregel type, since graph.compile() returns this type ?
In my case it's eventually needs to work in react native not in nextJS, unfortunately :(

compile() {
   ..... some code
    return new Pregel({
      nodes,
      input: `${this.entryPoint}:inbox`,
      output: END,
      hidden,
      checkpointer,
    });
}

where Pregel callsnitializeAsyncLocalStorageSingleton(); inside the constructor and needs async_hook's AsyncStorage.

[jacoblee93]

Yeah exactly that. The solution I'm thinking of is to add a separate Pregel class that doesn't use hooks for web. Only issue is that it's super convenient for tracing 😕

[demchuk-alex]

Agree @jacoblee93 or pass some param to compile to turn off tracing for web or pass your tracing something like that 👍

[jacoblee93]

Sorry when I say tracing it also affects things like streamEvents too so we do still want to make sure config is getting populated even if you're not using tracing. It'll just make a bunch of our examples broken when streaming intermediate steps, we'll have to document it well.

[demchuk-alex]

@jacoblee93 fair enough 👍

[demchuk-alex]

Hey @jacoblee93 sorry for nudging again :) did you have a chance to make it available for web ? Thanks

[jacoblee93]

Still on the TODO list - sorry for the delay.

[Luiz-N]

So fair to say lang graph js does not work in the browser currently?