getEdgeFlags error not getting configuration

[bstivenprz]

Hi there, i try to use getEdgeFlags in _middleware.tsx file of my project but i'm getting the next error: Error: @happykit/flags: Missing configuration. Call configure() first.

Here is the exact example that i'm using:

// src/pages/_middleware.ts
import { NextRequest, NextResponse } from 'next/server';
import type { AppFlags } from '@appTypes/appFlags.type';
import '../../flags.config';
import { getEdgeFlags } from '@happykit/flags/edge';

// Under construction middleware redirection.
// Using API response.
export async function middleware(request: NextRequest) {
  const flagBag = await getEdgeFlags<AppFlags>({ request });
  const response = NextResponse.rewrite('/_closed');
  if (flagBag.cookie) response.cookie(...flagBag.cookie.args);
  return response;
}

// flags.config.js
import { configure } from "@happykit/flags/config";

configure({
  envKey: process.env.NEXT_PUBLIC_FLAGS_ENVIRONMENT_KEY
});

¿What's could be the mistake if i'm importing '.../.../flag.config' file?

Thank you!

[dferber90]

That seems weird indeed. Your code seems correct.

Can you log out process.env.NEXT_PUBLIC_FLAGS_ENVIRONMENT_KEY to make sure it's defined?

If that's not it, can you try inlining the configure() call into src/pages/_middleware.ts to see if that fixes it?

Like so

// src/pages/_middleware.ts
import { NextRequest, NextResponse } from 'next/server';
import type { AppFlags } from '@appTypes/appFlags.type';
import { getEdgeFlags } from '@happykit/flags/edge';
import { configure } from "@happykit/flags/config";

configure({
  envKey: process.env.NEXT_PUBLIC_FLAGS_ENVIRONMENT_KEY
});

// Under construction middleware redirection.
// Using API response.
export async function middleware(request: NextRequest) {
  const flagBag = await getEdgeFlags<AppFlags>({ request });
  const response = NextResponse.rewrite('/_closed');
  if (flagBag.cookie) response.cookie(...flagBag.cookie.args);
  return response;
}

Let me know what you find and I can try to help from there.

[bstivenprz]

There is the same error trying call configure function in _middleware.ts, here's a screenshot of my code, and the currently termial logs:

It's printing null for some reason.

Thank you!

[dferber90]

I can confirm that this is an error in @happykit/flags. I'm working on a solution, sorry about that!

What I've found so far:

• we were exporting config as a constant, which does not work in common-js as the binding is not live. Refactored to a getConfig() call in 2.0.6-rc.1. However, this is probably unrelated to this issue as it happens in ESM.
• The issue seems to be that Next.js creates two instances of the ESM @happykit/flags/config bundle. The one configured from within flags.config will not be read by getEdgeFlags. Even if the configure call is moved into _middleware, getEdgeFlags will still read from a different instance of the module. As far as I understand, this should never happen.

~I was not able to reproduce it in Next.js itself yet though. Needs more digging.~ Reproduced

Update: Opened https://github.com/vercel/next.js/issues/34048 as this could be a Next.js issue.

[dferber90]

Confirmed that this was Next.js problem that will be fixed in the next release.

Closing this as Next.js v12.0.11 will fix it once it's released.

Thanks for reporting!