Module not found: Can't resolve 'async_hooks'

[DavidChouinard]

Upgrading to @vercel/flags 3.1.0 from 2.x results in this error for us:

Module not found: Can't resolve 'async_hooks'
  4 |
  5 | // src/lib/tracing.ts
> 6 | import { AsyncLocalStorage } from "async_hooks";
    | ^
  7 | var vercelFlagsTraceSymbol = Symbol.for("@vercel/flags:global-trace");
  8 | function setTracerProvider(tracer) {
  9 |   Reflect.set(globalThis, vercelFlagsTraceSymbol, tracer);

Any way to rectify?

[wootsbot]

Hi, I'm also facing the same issue after upgrading to @vercel/flags 3.1.0. I'm getting an error related to the async_hooks module:

[dferber90]

Do you have a reproduction you could share? Did the same code work on the earlier version?

This could be due to the feature flag ending up in a client component which is not supported, or due to your an older node version.

[DavidChouinard]

We're using a stock Next.js install with Node v22. The same code worked in 2.x. @wootsbot has a PR that seems to fix the issue: #52

[erik-nilcoast]

Seeing the same issue here. I'll try this PR or downgrade.

[erik-nilcoast]

const nextConfig = {
  webpack: (config) => {
    config.resolve = {
      ...config.resolve,
      fallback: {
        ...config.resolve.fallback,
        async_hooks: false,
      }
    }

    return config;
  },
 // ...

This seems to do the trick.

[dferber90]

I just published a snapshot release which uses node:async_hooks - Can you try @vercel/flags@3.1.1-475dd26e-20250206133544 and let me know whether that works for you?

[DavidChouinard]

Seems like it doesn't interact well with Webpack. Getting the following error:

Module build failed: UnhandledSchemeError: Reading from "node:async_hooks" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.

[dferber90]

Thanks for checking! Could you provide a minimal reproduction for the original issue? I still think the root cause here could be that you're using the flag in a client component.

[erik-nilcoast]

@dferber90 client side use is absolutely my problem as well. I know the documentation is clear about WHY server side flags are better, and I mostly agree, but living in a React/SPA means that I can have "stateless" cookie based flags that can be interrogated on the client.

The docs should be clearer that this SDK can never be used on the client side if that's the intention. I didn't realize this library wasn't meant for general use yet.

[erik-nilcoast]

This seems to do the trick just fine.

export function decide(id: string, config: any) {
  const { enabled, variants } = config;
  if (enabled && variants) {
    const numVariants = variants.length;
    const hash = id;

    /**
     * This bucketing algorithm is predicated on our randomUUID being fair
     * which I think is acceptable based on testing. The buckets are NOT
     * and will never be completely aligned, but simple a/b bucketing works.
     */
    const numericHash = parseInt(hash.substring(0, 8), 16); // uuidv7 is sequential, which may make the first stanza too similar?
    const index = ((numericHash % 2 ** 32) + numVariants) % numVariants;
    return variants[index];
  }

  return false;
}