reading closure values from server action fails if a lambda is defined inside the action

[tungv]

Link to the code that reproduces this issue

https://github.com/tungv/repro-next-15-use-server-closure-bug/blob/main/src/app/page.tsx

To Reproduce

1. start the dev server (bun dev or npm run dev)
2. open localhost:3000
3. click on submit button

Current vs. Expected behavior

current behavior:

It thows a ReferenceError: someValueFromRender is not defined

expected behavior

server action can access and log the value "someValueFromRender"

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.4.0: Tue Mar  4 21:05:34 PST 2025; root:xnu-11417.100.576.505.3~2/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 20.16.0
  npm: 10.5.0
  Yarn: 1.22.19
  pnpm: N/A
Relevant Packages:
  next: 15.2.3 // Latest available version is detected (15.2.3).
  eslint-config-next: N/A
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.8.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Server Actions

Which stage(s) are affected? (Select all that apply)

next dev (local), next start (local)

Additional context

I tested it aganist the following next versions:

• 15.2.3 (failed)
• 15.1.7 (failed)
• 15.0.4 (PASSED)
• 14.x (PASSED)

I tested it with and without turbo flag
When bun dev fails, npm run dev fails too.

It works when I move all lambda and/or function declarations out of the "use server" function

export default function Home() {
  const someValueFromRender = "someValueFromRender";
  return (
    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
      <form
        action={async function submit() {
          "use server";
          console.log(someValueFromRender);

          // it works now
          doSomething();
        }}
      >
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

function doSomething() {
  [1, 2, 3].map((x) => x + 1);
}

[tungv]

cc @leerob I think this is quite critical

[tungv]

build output for the failed case:

(e, t, r) => {
	"use strict";
	r.r(t), r.d(t, { $$RSC_SERVER_ACTION_0: () => o, default: () => a });
	var n = r(7413),
		i = r(7218);
	r(9130);
	let o = async function () {
		console.log(someValueFromRender),
			[1, 2, 3].map(function () {
				return 1;
			});
	};
	function a() {
		return (0, n.jsx)("div", {
			className:
				"grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]",
			children: (0, n.jsx)("form", {
				action: (0, i.A)(o, "0045962ce5822ef4f4f2217b644c5e460291c3d90c", null),
				children: (0, n.jsx)("button", {
					type: "submit",
					children: "Submit",
				}),
			}),
		});
	}
};

build output when I removed all the lambda:

(e, t, r) => {
	"use strict";
	r.r(t), r.d(t, { $$RSC_SERVER_ACTION_0: () => a, default: () => s });
	var n = r(7413),
		i = r(7218),
		o = r(9130);
	let a = async function (e) {
		var [t] = await (0, o.decryptActionBoundArgs)(
			"4045962ce5822ef4f4f2217b644c5e460291c3d90c",
			e,
		);
		console.log(t), [1, 2, 3].map((e) => e + 1);
	};
	function s() {
		return (0, n.jsx)("div", {
			className:
				"grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]",
			children: (0, n.jsx)("form", {
				action: (0, i.A)(
					a,
					"4045962ce5822ef4f4f2217b644c5e460291c3d90c",
					null,
				).bind(
					null,
					(0, o.encryptActionBoundArgs)(
						"4045962ce5822ef4f4f2217b644c5e460291c3d90c",
						"someValueFromRender",
					),
				),
				children: (0, n.jsx)("button", {
					type: "submit",
					children: "Submit",
				}),
			}),
		});
	}
};

[tungv]

@leerob can you take a look please.

[leerob]

• Have you tested if it works pulled out into a separate function?
• Have you tested if it works when used in a separate actions.ts file?

[tungv]

• Have you tested if it works pulled out into a separate function?

// ❌ doesn't work
export default function Home() {
  const someValueFromRender = "someValueFromRender";

  async function submit() {
    "use server";
    console.log(someValueFromRender);

    // without the follow statement, the submit button won't throw an error
    const arr = [1, 2, 3].map((x) => x + 1);
    console.log(arr);
  }

  return (
    <form action={submit}>
      <button type="submit">Submit</button>
    </form>
  );
}

• Have you tested if it works when used in a separate actions.ts file?

@leerob it will no longer have access to closed-over value had I pulled them out.

[tungv]

updates

both Next.js 15.2.4 and canary fail

[leerob]

Thank you for helping with the reproduction.

It works when I move all lambda and/or function declarations out of the "use server" function

It sounds like there is a relatively easy workaround for the time being, correct?

[tungv]

Thank you for helping with the reproduction.

It works when I move all lambda and/or function declarations out of the "use server" function

It sounds like there is a relatively easy workaround for the time being, correct?

@leerob yes, you're correct, to workaround this, I need to create a module-scoped function that accepts parameters collected from the inline function. Problem is in order to upgrade to next 15, we need to refactor existing codebase to find those usages.

I think this should eventually be fixed because it will probably affect "use cache" directive as well.

[CarbonNeuron]

Unfortunately I am experiencing this too. I thought I was going crazy. Looks like even trying to do stuff like filter with a lambda in it causes it to lose outside scope for the entire function. That's a little strange. I am on Next.js 15.3.1 (Turbopack), I haven't tried in production yet without turbopack.

I'm not sure why more people aren't running into this? It seems pretty ordinary to do stuff with anonymous functions.

[CarbonNeuron]

I'm sure this has something to do with the transform here: https://github.com/vercel/next.js/blob/ce0fe2672e46d0755989dccb45968d8128932adf/crates/next-custom-transforms/src/transforms/server_actions.rs
. Maybe it's failing to collect arg names so it doesn't hoist anything? Seems likely to me, however I do not do a lot of rust programming.

[CarbonNeuron]

Something especially weird I noticed while trying to fix this in my codebase is that it is not consistent. IE: an inline arrow server action that accepts a "data" param:

onSubmit={async (data) => {
          'use server';

          const uploadTasks = await Promise.all(
            data.images.filter((x) => typeof x !== 'string').map((image) => UploadFile(image))
         );
...

Works fine.

[tungv]

Something especially weird I noticed while trying to fix this in my codebase is that it is not consistent. IE: an inline arrow server action that accepts a "data" param:

onSubmit={async (data) => {
          'use server';

          const uploadTasks = await Promise.all(
            data.images.filter((x) => typeof x !== 'string').map((image) => UploadFile(image))
         );
...

Works fine.

did you try to access any closed over variables?

[CarbonNeuron]

Something especially weird I noticed while trying to fix this in my codebase is that it is not consistent. IE: an inline arrow server action that accepts a "data" param:

onSubmit={async (data) => {
          'use server';

          const uploadTasks = await Promise.all(
            data.images.filter((x) => typeof x !== 'string').map((image) => UploadFile(image))
         );
...

Works fine.

did you try to access any closed over variables?

Yes, Sorry for not including the whole function, but right below those lines I am calling this:

        const created = await prisma.productType.update({
          where: {
            id: productType.id, //This comes from page level closure
          },
          data: {
            name: data.name,
            manufacturer: data.manufacturer,
            model: data.model,
            description: data.description,
          },
        });

Which works fine when doing that promise thing.

I ended up extracting the code that when added would cause the issue into it's own function declared outside the page component (still in page.tsx)

async function UpdateExtensionData(productId: number, data: NewProductSchemaType) {
  if (data.extensions.filter((x) => x.enabled).length > 0) {
    await prisma.$transaction(async (tx) => {
      await tx.productEnabledExtensions.deleteMany({
        where: { productTypeId: productId },
      });
      await tx.productEnabledExtensions.createMany({
        data: data.extensions
          .filter((x) => x.enabled)
          .map((x) => ({
            extensionId: x.extensionId,
            productTypeId: productId,
          })),
      });
    });
  } else {
    await prisma.productEnabledExtensions.deleteMany({
      where: { productTypeId: productId },
    });
  }

  const globalRegistry = GetGlobalRegistry();
  globalRegistry.register(new ProductProvider({ id: productId }));

  const configurable = globalRegistry.get(UserConfigurableProductExtension);

  await globalRegistry.initializeAllAsync();

  //Configurable Extensions
  for (const extension of data.extensions.filter((x) =>
    configurable.some((y) => y.id == x.extensionId)
  )) {
    const foundExtension = globalRegistry.getById(extension.extensionId);
    if (foundExtension && foundExtension instanceof UserConfigurableProductExtension) {
      const parsedData = await foundExtension.ConfigSchema.safeParseAsync(extension.configValues);
      if (parsedData.success) {
        await foundExtension.SetConfigAsync(parsedData.data);
      }
    }
  }
}

Excuse my formatting. The function body is unchanged to the one that when added to the inline arrow function server action makes it so we can no longer access the productType.id property. (other than refactoring productType.id to a productId param)

The only extra lambda I see being created here is for the

data.extensions.filter((x) =>
    configurable.some((y) => y.id == x.extensionId)
  )

For the "some" function, however, in my testing including any of those blocks (the if statement at the top, or the update data part) in the server action makes the scope get lost.