fix(middleware): Support wasm in bundled middleware #802

vicb · 2025-03-27T20:25:11Z

Related to opennextjs/opennextjs-cloudflare#471

2 fixes in this PR:

For bundled middleware, we do copy the source file (in createServerBundle but we also need to copy .wasm files
The second fix is specific for the edge, the file name is used in Next middleware source, then if we re-use the same name to import the same file, ESBulid will append a 2 and Next can not reference this import.

changeset-bot · 2025-03-27T20:25:15Z

🦋 Changeset detected

Latest commit: c2dfbd6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@opennextjs/aws	Patch
app-pages-router	Patch
app-router	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2025-03-27T20:27:08Z

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	26.15%	2358 / 9014
🔵	Statements	26.15%	2358 / 9014
🔵	Functions	52.71%	126 / 239
🔵	Branches	73.15%	586 / 801

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
packages/open-next/src/build/createServerBundle.ts	0%	0%	0%	0%	1-375
packages/open-next/src/build/edge/createEdgeBundle.ts	0%	0%	0%	0%	1-249
packages/open-next/src/plugins/edge.ts	0%	0%	0%	0%	1-218

Generated in workflow #1114 for commit c2dfbd6 by the Vitest Coverage Report Action

pkg-pr-new · 2025-03-27T20:27:39Z

Open in Stackblitz

pnpm add https://pkg.pr.new/@opennextjs/aws@802

commit: c2dfbd6

conico974 · 2025-03-27T21:28:26Z

packages/open-next/src/build/createServerBundle.ts

+      path.join(outPackagePath, "middleware.mjs"),
+    );
+
+    const middlewareManifest = loadMiddlewareManifest(


We should create a generic function for this and use it both here and there

opennextjs-aws/packages/open-next/src/build/edge/createEdgeBundle.ts

Lines 212 to 230 in fbe09ae

//Copy wasm files

const wasmFiles = middlewareInfo.wasm;

mkdirSync(path.join(outputDir, "wasm"), { recursive: true });

for (const wasmFile of wasmFiles) {

fs.copyFileSync(

path.join(buildOutputDotNextDir, wasmFile.filePath),

path.join(outputDir, `wasm/${wasmFile.name}.wasm`),

);

}

// Copy assets

const assets = middlewareInfo.assets;

mkdirSync(path.join(outputDir, "assets"), { recursive: true });

for (const asset of assets) {

fs.copyFileSync(

path.join(buildOutputDotNextDir, asset.filePath),

path.join(outputDir, `assets/${asset.name}`),

);

}

We also need to copy the assets

conico974 · 2025-03-27T21:38:37Z

packages/open-next/src/plugins/edge.ts

-      ? `import ${file.name} from './wasm/${file.name}.wasm';`
+      ? // Decorate the name to avoid name collisions
+        `import __OpenNextWasm${i} from './wasm/${file.name}.wasm';
+globalThis.${file.name} = __OpenNextWasm${i}`


I'm probably missing something here, but if there is collision, wouldn't this also cause some issue with the global ?

Only things that use this (without being a separate function) should be the middleware

.next/server/src/middleware.js would have something like

683: (e) => { e.exports = wasm_ea010aa52414c7de383495546f15cb7d49b055fc; }

If the code here is

import wasm_ea010aa52414c7de383495546f15cb7d49b055fc from '...';

Then ESBuild will change that to wasm_ea010aa52414c7de383495546f15cb7d49b055fc2 (appending a 2 at the end).

So we want the "collision" here.

conico974 · 2025-03-27T21:40:09Z

packages/open-next/src/build/createServerBundle.ts

@@ -159,15 +162,26 @@ async function generateBundle(
  if (!config.middleware?.external) {
    fs.copyFileSync(
      path.join(options.buildDir, "middleware.mjs"),
-      path.join(outputPath, packagePath, "middleware.mjs"),
+      path.join(outPackagePath, "middleware.mjs"),


All this copy logic should also be in a function on this file so that everything middleware related is there https://github.com/opennextjs/opennextjs-aws/blob/main/packages/open-next/src/build/createMiddleware.ts.

Pretty sure we need to copy the wasm/asset files for the external middleware as well

conico974

LGTM Thanks

vicb · 2025-03-28T14:56:51Z

Thanks for the review Nico!

conico974 reviewed Mar 27, 2025

View reviewed changes

vicb added 2 commits March 28, 2025 11:27

fix(middleware): Support wasm in bundled middleware

5a324e7

fixup: changeset

a40cf04

vicb force-pushed the vb-branch-3 branch from f9d2b1d to 773930c Compare March 28, 2025 13:53

vicb requested a review from conico974 March 28, 2025 13:55

fixup: review feedback

c2dfbd6

vicb force-pushed the vb-branch-3 branch from 773930c to c2dfbd6 Compare March 28, 2025 13:56

conico974 approved these changes Mar 28, 2025

View reviewed changes

vicb merged commit 8392e22 into main Mar 28, 2025
3 checks passed

vicb deleted the vb-branch-3 branch March 28, 2025 14:57

github-actions bot mentioned this pull request Mar 28, 2025

Version Packages #797

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(middleware): Support wasm in bundled middleware #802

fix(middleware): Support wasm in bundled middleware #802

vicb commented Mar 27, 2025

changeset-bot bot commented Mar 27, 2025 •

edited

Loading

github-actions bot commented Mar 27, 2025 •

edited

Loading

pkg-pr-new bot commented Mar 27, 2025 •

edited

Loading

conico974 Mar 27, 2025

conico974 Mar 27, 2025

vicb Mar 28, 2025

conico974 Mar 27, 2025

conico974 left a comment

vicb commented Mar 28, 2025

	//Copy wasm files
	const wasmFiles = middlewareInfo.wasm;
	mkdirSync(path.join(outputDir, "wasm"), { recursive: true });
	for (const wasmFile of wasmFiles) {
	fs.copyFileSync(
	path.join(buildOutputDotNextDir, wasmFile.filePath),
	path.join(outputDir, `wasm/${wasmFile.name}.wasm`),
	);
	}

	// Copy assets
	const assets = middlewareInfo.assets;
	mkdirSync(path.join(outputDir, "assets"), { recursive: true });
	for (const asset of assets) {
	fs.copyFileSync(
	path.join(buildOutputDotNextDir, asset.filePath),
	path.join(outputDir, `assets/${asset.name}`),
	);
	}

fix(middleware): Support wasm in bundled middleware #802

fix(middleware): Support wasm in bundled middleware #802

Conversation

vicb commented Mar 27, 2025

changeset-bot bot commented Mar 27, 2025 • edited Loading

🦋 Changeset detected

github-actions bot commented Mar 27, 2025 • edited Loading

Coverage Report

pkg-pr-new bot commented Mar 27, 2025 • edited Loading

conico974 Mar 27, 2025

Choose a reason for hiding this comment

conico974 Mar 27, 2025

Choose a reason for hiding this comment

vicb Mar 28, 2025

Choose a reason for hiding this comment

conico974 Mar 27, 2025

Choose a reason for hiding this comment

conico974 left a comment

Choose a reason for hiding this comment

vicb commented Mar 28, 2025

changeset-bot bot commented Mar 27, 2025 •

edited

Loading

github-actions bot commented Mar 27, 2025 •

edited

Loading

pkg-pr-new bot commented Mar 27, 2025 •

edited

Loading