fix: usage of wasm in an appDir page file using the edge runtime (#41689

) Fixes #41673 Updates the wasm `AssetBinding` filePath to be the fully qualified path during build so the files can get loaded. ## Bug - [x] Related issues linked using `fixes #number` - [x] Integration tests added - [x] Errors have a helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
vercel · Nov 3, 2022 · d159fb0 · d159fb0
1 parent 059538b
commit d159fb0
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 1 deletion.
diff --git a/packages/next/build/utils.ts b/packages/next/build/utils.ts
@@ -52,6 +52,7 @@ import {
   loadRequireHook,
   overrideBuiltInReactPackages,
 } from './webpack/require-hook'
+import { AssetBinding } from './webpack/loaders/get-module-build-info'
 
 loadRequireHook()
 if (process.env.NEXT_PREBUNDLED_REACT) {
@@ -1259,7 +1260,13 @@ export async function isPageStatic({
         const runtime = await getRuntimeContext({
           paths: edgeInfo.files.map((file: string) => path.join(distDir, file)),
           env: edgeInfo.env,
-          edgeFunctionEntry: edgeInfo,
+          edgeFunctionEntry: {
+            ...edgeInfo,
+            wasm: (edgeInfo.wasm ?? []).map((binding: AssetBinding) => ({
+              ...binding,
+              filePath: path.join(distDir, binding.filePath),
+            })),
+          },
           name: edgeInfo.name,
           useCache: true,
           distDir,

diff --git a/test/production/app-dir-edge-runtime-with-wasm/add.wasm b/test/production/app-dir-edge-runtime-with-wasm/add.wasm
diff --git a/test/production/app-dir-edge-runtime-with-wasm/index.test.ts b/test/production/app-dir-edge-runtime-with-wasm/index.test.ts
@@ -0,0 +1,63 @@
+import path from 'path'
+import { createNext, FileRef } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import { renderViaHTTP } from 'next-test-utils'
+
+const files = {
+  'app/layout.jsx': `
+    export default function AppLayout({ children }) {
+      return (
+        <html>
+          <head>
+            <title>WASM Import</title>
+          </head>
+          <body>
+            {children}
+          </body>
+        </html>
+      )
+    }
+  `,
+  'app/page.jsx': `
+    import wasm from '../wasm/add.wasm?module'
+    const instance$ = WebAssembly.instantiate(wasm);
+
+    async function addOne(a) {
+      const { exports } = await instance$;
+      return exports.add_one(a);
+    }
+
+    export default async function Page() {
+      const two = await addOne(1)
+      return \`1 + 1 is: $\{two}\`
+    }
+
+    export const runtime = "experimental-edge"
+  `,
+  'wasm/add.wasm': new FileRef(path.join(__dirname, 'add.wasm')),
+}
+
+describe('app-dir edge runtime with wasm', () => {
+  let next: NextInstance
+
+  beforeAll(async () => {
+    next = await createNext({
+      files,
+      dependencies: {
+        react: 'experimental',
+        'react-dom': 'experimental',
+      },
+      nextConfig: {
+        experimental: {
+          appDir: true,
+        },
+      },
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it('should have built', async () => {
+    const html = await renderViaHTTP(next.url, '/')
+    expect(html).toContain('1 + 1 is: 2')
+  })
+})