langchain-ai/langgraphjs
1
0
Fork 0
mirror of https://github.com/langchain-ai/langgraphjs.git synced 2026-07-22 09:05:28 -04:00
Code Issues 108 Packages Projects Releases 20 Wiki Activity

Async_hooks cannot be used in browser #15

New Issue
Closed
opened 2026-02-15 17:05:18 -05:00 by yindo · 26 comments
yindo commented 2026-02-15 17:05:18 -05:00
Owner
Copy Link
Copy Source

Originally created by @Hehongyuanlove on GitHub (Mar 7, 2024).

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)

Originally created by @Hehongyuanlove on GitHub (Mar 7, 2024). I'm using [chat_agent_executor_with_function_calling](https://github.com/langchain-ai/langgraphjs/blob/main/examples/chat_agent_executor_with_function_calling/base.ipynb) 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)
yindo closed this issue 2026-02-15 17:05:18 -05:00
yindo commented 2026-02-15 17:05:19 -05:00
Author
Owner
Copy Link
Copy Source

@bracesproul commented on GitHub (Mar 11, 2024):

cc @jacoblee93 related to AsyncLocalStorage

@bracesproul commented on GitHub (Mar 11, 2024): cc @jacoblee93 related to `AsyncLocalStorage`
yindo commented 2026-02-15 17:05:19 -05:00
Author
Owner
Copy Link
Copy Source

@jacoblee93 commented on GitHub (Mar 12, 2024):

Oh shoot 😬

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

@jacoblee93 commented on GitHub (Mar 12, 2024): Oh shoot 😬 Will see if we can add web entrypoints to mitigate this I suppose.
yindo commented 2026-02-15 17:05:19 -05:00
Author
Owner
Copy Link
Copy Source

@demchuk-alex commented on GitHub (Mar 26, 2024):

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 ?

@demchuk-alex commented on GitHub (Mar 26, 2024): 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 ?
yindo commented 2026-02-15 17:05:20 -05:00
Author
Owner
Copy Link
Copy Source

@jacoblee93 commented on GitHub (Mar 26, 2024):

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

@jacoblee93 commented on GitHub (Mar 26, 2024): Thank you for nudging - will try my best to look this week!
yindo commented 2026-02-15 17:05:20 -05:00
Author
Owner
Copy Link
Copy Source

@davidfant commented on GitHub (Mar 26, 2024):

@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

@davidfant commented on GitHub (Mar 26, 2024): @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
yindo commented 2026-02-15 17:05:20 -05:00
Author
Owner
Copy Link
Copy Source

@demchuk-alex commented on GitHub (Mar 27, 2024):

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.

@demchuk-alex commented on GitHub (Mar 27, 2024): 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 :( ```javascript compile() { ..... some code return new Pregel({ nodes, input: `${this.entryPoint}:inbox`, output: END, hidden, checkpointer, }); } ``` where Pregel calls`nitializeAsyncLocalStorageSingleton();` inside the constructor and needs async_hook's AsyncStorage.
yindo commented 2026-02-15 17:05:21 -05:00
Author
Owner
Copy Link
Copy Source

@jacoblee93 commented on GitHub (Mar 27, 2024):

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 😕

@jacoblee93 commented on GitHub (Mar 27, 2024): 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 😕
yindo commented 2026-02-15 17:05:21 -05:00
Author
Owner
Copy Link
Copy Source

@demchuk-alex commented on GitHub (Mar 27, 2024):

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

@demchuk-alex commented on GitHub (Mar 27, 2024): Agree @jacoblee93 or pass some param to compile to turn off tracing for web or pass your tracing something like that 👍
yindo commented 2026-02-15 17:05:22 -05:00
Author
Owner
Copy Link
Copy Source

@jacoblee93 commented on GitHub (Mar 27, 2024):

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.

@jacoblee93 commented on GitHub (Mar 27, 2024): 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.
yindo commented 2026-02-15 17:05:22 -05:00
Author
Owner
Copy Link
Copy Source

@demchuk-alex commented on GitHub (Mar 27, 2024):

@jacoblee93 fair enough 👍

@demchuk-alex commented on GitHub (Mar 27, 2024): @jacoblee93 fair enough 👍
yindo commented 2026-02-15 17:05:22 -05:00
Author
Owner
Copy Link
Copy Source

@demchuk-alex commented on GitHub (Apr 18, 2024):

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

@demchuk-alex commented on GitHub (Apr 18, 2024): Hey @jacoblee93 sorry for nudging again :) did you have a chance to make it available for web ? Thanks
yindo commented 2026-02-15 17:05:23 -05:00
Author
Owner
Copy Link
Copy Source

@jacoblee93 commented on GitHub (Apr 18, 2024):

Still on the TODO list - sorry for the delay.

@jacoblee93 commented on GitHub (Apr 18, 2024): Still on the TODO list - sorry for the delay.
yindo commented 2026-02-15 17:05:23 -05:00
Author
Owner
Copy Link
Copy Source

@Luiz-N commented on GitHub (May 24, 2024):

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

@Luiz-N commented on GitHub (May 24, 2024): So fair to say lang graph js does not work in the browser currently?
yindo commented 2026-02-15 17:05:23 -05:00
Author
Owner
Copy Link
Copy Source

@fatganz commented on GitHub (Jun 2, 2024):

The same thing for Obsidian plugins

@fatganz commented on GitHub (Jun 2, 2024): The same thing for Obsidian plugins
yindo commented 2026-02-15 17:05:24 -05:00
Author
Owner
Copy Link
Copy Source

@jacoblee93 commented on GitHub (Jun 2, 2024):

At present yes. Will update when I can.

@jacoblee93 commented on GitHub (Jun 2, 2024): At present yes. Will update when I can.
yindo commented 2026-02-15 17:05:24 -05:00
Author
Owner
Copy Link
Copy Source

@saficool commented on GitHub (Jun 7, 2024):

At present yes. Will update when I can.

Waiting for your update, I have plane to use langgraphjs in Angular

@saficool commented on GitHub (Jun 7, 2024): > At present yes. Will update when I can. Waiting for your update, I have plane to use langgraphjs in Angular
yindo commented 2026-02-15 17:05:24 -05:00
Author
Owner
Copy Link
Copy Source

@vladtar commented on GitHub (Jun 9, 2024):

Has anyone been able to polyfill node:async_hooks via a rollup plugin or something similar? For some reason none of them seem to be working for me.

Here is an example rollup config I tried:

import terser from '@rollup/plugin-terser';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import copy from 'rollup-plugin-copy';
import styles from "rollup-plugin-styles";
import { polyfillNode } from "esbuild-plugin-polyfill-node";

export default {
	input: 'dist/MyFile.js',
	output: [
		{
			file: 'dist/cdn/MyFile.js',
			format: 'iife',
			exports: 'named',
			name: 'myFileExports'
		}
	],
	plugins: [
		styles({
			minimize: true
		}),
		copy({
			targets: [
				{ src: ['MyFile.css', 'dist/*.d.ts'], dest: ['dist/npm', 'dist/cdn'] },
				{ src: ['package.json', 'LICENSE', 'README.md'], dest: ['dist/npm'] }
			]
		}),
		polyfillNode({
			polyfills: {
				async_hooks: true
			}
		}),
		commonjs(),
		nodeResolve({
			browser: true,
			preferBuiltins: false
		})
	]
};
@vladtar commented on GitHub (Jun 9, 2024): Has anyone been able to polyfill `node:async_hooks` via a rollup plugin or something similar? For some reason none of them seem to be working for me. Here is an example rollup config I tried: ``` import terser from '@rollup/plugin-terser'; import { nodeResolve } from '@rollup/plugin-node-resolve'; import commonjs from '@rollup/plugin-commonjs'; import copy from 'rollup-plugin-copy'; import styles from "rollup-plugin-styles"; import { polyfillNode } from "esbuild-plugin-polyfill-node"; export default { input: 'dist/MyFile.js', output: [ { file: 'dist/cdn/MyFile.js', format: 'iife', exports: 'named', name: 'myFileExports' } ], plugins: [ styles({ minimize: true }), copy({ targets: [ { src: ['MyFile.css', 'dist/*.d.ts'], dest: ['dist/npm', 'dist/cdn'] }, { src: ['package.json', 'LICENSE', 'README.md'], dest: ['dist/npm'] } ] }), polyfillNode({ polyfills: { async_hooks: true } }), commonjs(), nodeResolve({ browser: true, preferBuiltins: false }) ] }; ```
yindo commented 2026-02-15 17:05:25 -05:00
Author
Owner
Copy Link
Copy Source

@bioshazard commented on GitHub (Jun 15, 2024):

Whoa did this really get worked on 3 days ago?! Lucky timing for me. Running this in the browser is critical to my design, thank you @jacoblee93 !! I see I just need to use @langchain/langgraph/web and the errors go away!!

@bioshazard commented on GitHub (Jun 15, 2024): Whoa did this really get worked on 3 days ago?! Lucky timing for me. Running this in the browser is critical to my design, thank you @jacoblee93 !! I see I just need to use `@langchain/langgraph/web` and the errors go away!!
yindo commented 2026-02-15 17:05:25 -05:00
Author
Owner
Copy Link
Copy Source

@jacoblee93 commented on GitHub (Jun 15, 2024):

Glad the timing was good! Added some docs too:

https://langchain-ai.github.io/langgraphjs/how-tos/use-in-web-environments/

@jacoblee93 commented on GitHub (Jun 15, 2024): Glad the timing was good! Added some docs too: https://langchain-ai.github.io/langgraphjs/how-tos/use-in-web-environments/
yindo commented 2026-02-15 17:05:26 -05:00
Author
Owner
Copy Link
Copy Source

@fatganz commented on GitHub (Jun 15, 2024):

Thank you for the hard work! @jacoblee93

@fatganz commented on GitHub (Jun 15, 2024): Thank you for the hard work! @jacoblee93
yindo commented 2026-02-15 17:05:26 -05:00
Author
Owner
Copy Link
Copy Source

@s97712 commented on GitHub (Jun 16, 2024):

Glad the timing was good! Added some docs too:

https://langchain-ai.github.io/langgraphjs/how-tos/use-in-web-environments/

When will it be released?

@s97712 commented on GitHub (Jun 16, 2024): > Glad the timing was good! Added some docs too: > > https://langchain-ai.github.io/langgraphjs/how-tos/use-in-web-environments/ When will it be released?
yindo commented 2026-02-15 17:05:26 -05:00
Author
Owner
Copy Link
Copy Source

@bioshazard commented on GitHub (Jun 16, 2024):

Glad the timing was good! Added some docs too:
https://langchain-ai.github.io/langgraphjs/how-tos/use-in-web-environments/

When will it be released?

I saw it was already in the latest release

@bioshazard commented on GitHub (Jun 16, 2024): > > Glad the timing was good! Added some docs too: > > https://langchain-ai.github.io/langgraphjs/how-tos/use-in-web-environments/ > > When will it be released? I saw it was already in the latest release
yindo commented 2026-02-15 17:05:27 -05:00
Author
Owner
Copy Link
Copy Source

@bioshazard commented on GitHub (Jun 16, 2024):

Glad the timing was good! Added some docs too:
https://langchain-ai.github.io/langgraphjs/how-tos/use-in-web-environments/

When will it be released?

I saw it in the release from 3 days ago.

Screenshot_20240616-060611

@bioshazard commented on GitHub (Jun 16, 2024): > > Glad the timing was good! Added some docs too: > > https://langchain-ai.github.io/langgraphjs/how-tos/use-in-web-environments/ > > When will it be released? I saw it in the release from 3 days ago. ![Screenshot_20240616-060611](https://github.com/langchain-ai/langgraphjs/assets/5616668/ba44424d-3934-49a4-ad0c-7fd5b67a910f)
yindo commented 2026-02-15 17:05:27 -05:00
Author
Owner
Copy Link
Copy Source

@tyadav7 commented on GitHub (Mar 24, 2025):

To anyone who might be struggling to use the functional api, interrupts etc you can see this comment it might help you.

https://github.com/langchain-ai/langgraphjs/issues/879#issuecomment-2749252465

@tyadav7 commented on GitHub (Mar 24, 2025): To anyone who might be struggling to use the functional api, interrupts etc you can see this comment it might help you. https://github.com/langchain-ai/langgraphjs/issues/879#issuecomment-2749252465
yindo commented 2026-02-15 17:05:28 -05:00
Author
Owner
Copy Link
Copy Source

@axe-me commented on GitHub (Apr 8, 2025):

I'm trying to use the prebuilt supervisor agent https://www.npmjs.com/package/@langchain/langgraph-supervisor in react native environment. However, the handoff tool use AsyncLocalStorage from the async hooks module to retrieve config, which breaks the build. I tried to fix it with the polyfill mentioned above (https://github.com/langchain-ai/langgraphjs/issues/879#issuecomment-2749252465) still no luck to make it work.
Is that possible to publish a web version of the prebuilt agent as well?

@axe-me commented on GitHub (Apr 8, 2025): I'm trying to use the prebuilt supervisor agent https://www.npmjs.com/package/@langchain/langgraph-supervisor in react native environment. However, the handoff tool use AsyncLocalStorage from the async hooks module to retrieve config, which breaks the build. I tried to fix it with the polyfill mentioned above (https://github.com/langchain-ai/langgraphjs/issues/879#issuecomment-2749252465) still no luck to make it work. Is that possible to publish a web version of the prebuilt agent as well?
yindo commented 2026-02-15 17:05:29 -05:00
Author
Owner
Copy Link
Copy Source

@jacoblee93 commented on GitHub (Apr 8, 2025):

Is that possible to publish a web version of the prebuilt agent as well?

CC @vbarda - I think it should just be a matter of switching the import to @langchain/langgraph/web here and making sure we pass config through everywhere:

https://github.com/langchain-ai/langgraphjs/blob/main/libs/langgraph-supervisor/src/supervisor.ts

@jacoblee93 commented on GitHub (Apr 8, 2025): > Is that possible to publish a web version of the prebuilt agent as well? CC @vbarda - I think it should just be a matter of switching the import to `@langchain/langgraph/web` here and making sure we pass config through everywhere: https://github.com/langchain-ai/langgraphjs/blob/main/libs/langgraph-supervisor/src/supervisor.ts
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
bug
checkpointer
docs-needed
documentation
enhancement
good first issue
good writeup
help wanted
invalid
langgraph-supervisor
open-swe-auto
platform
prebuilt
pull-request
Mirrored from GitHub Pull Request
 question
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langchain-ai/langgraphjs#15
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?