fix(middleware): Support wasm in bundled middleware

[vicb]

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]

🦋 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]

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]

Open in Stackblitz

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

commit: c2dfbd6

[conico974]

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]

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

[vicb]

.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]

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]

Thanks for the review Nico!