diff --git a/examples/with-webassembly/pages/api/edge.js b/examples/with-webassembly/pages/api/edge.js new file mode 100644 index 0000000000000..f724fd32280f5 --- /dev/null +++ b/examples/with-webassembly/pages/api/edge.js @@ -0,0 +1,11 @@ +import add_module from '../../add.wasm?module' + +const instance$ = WebAssembly.instantiate(add_module) + +export default async function edgeExample() { + const { exports } = await instance$ + const number = exports.add_one(10) + return new Response(`got: ${number}`) +} + +export const config = { runtime: 'experimental-edge' } diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index 780e12c6a850a..b1604e5c284fe 100644 --- a/packages/next/build/webpack-config.ts +++ b/packages/next/build/webpack-config.ts @@ -1716,13 +1716,14 @@ export default async function getBaseWebpackConfig( const webpack5Config = webpackConfig as webpack5.Configuration - webpack5Config.module?.rules?.unshift({ - test: /\.wasm$/, - issuerLayer: 'middleware', - loader: 'next-middleware-wasm-loader', - type: 'javascript/auto', - resourceQuery: /module/i, - }) + if (isEdgeServer) { + webpack5Config.module?.rules?.unshift({ + test: /\.wasm$/, + loader: 'next-middleware-wasm-loader', + type: 'javascript/auto', + resourceQuery: /module/i, + }) + } webpack5Config.experiments = { layers: true, diff --git a/test/e2e/middleware-can-use-wasm-files/add.wasm b/test/e2e/edge-can-use-wasm-files/add.wasm similarity index 100% rename from test/e2e/middleware-can-use-wasm-files/add.wasm rename to test/e2e/edge-can-use-wasm-files/add.wasm diff --git a/test/e2e/middleware-can-use-wasm-files/index.test.ts b/test/e2e/edge-can-use-wasm-files/index.test.ts similarity index 72% rename from test/e2e/middleware-can-use-wasm-files/index.test.ts rename to test/e2e/edge-can-use-wasm-files/index.test.ts index 945ad80a5c7b9..5311542d15d35 100644 --- a/test/e2e/middleware-can-use-wasm-files/index.test.ts +++ b/test/e2e/edge-can-use-wasm-files/index.test.ts @@ -32,6 +32,44 @@ function baseNextConfig(): Parameters[0] { } } +describe('edge api endpoints can use wasm files', () => { + let next: NextInstance + + beforeAll(async () => { + next = await createNext({ + files: { + 'pages/api/add.js': ` + import { increment } from '../../src/add.js' + export default async (request) => { + const input = Number(request.nextUrl.searchParams.get('input')) || 1; + const value = await increment(input); + return new Response(null, { headers: { data: JSON.stringify({ input, value }) } }); + } + export const config = { runtime: 'experimental-edge' }; + `, + 'src/add.wasm': new FileRef(path.join(__dirname, './add.wasm')), + 'src/add.js': ` + import wasm from './add.wasm?module' + const instance$ = WebAssembly.instantiate(wasm); + + export async function increment(a) { + const { exports } = await instance$; + return exports.add_one(a); + } + `, + }, + }) + }) + afterAll(() => next.destroy()) + it('uses the wasm file', async () => { + const response = await fetchViaHTTP(next.url, '/api/add', { input: 10 }) + expect(extractJSON(response)).toEqual({ + input: 10, + value: 11, + }) + }) +}) + describe('middleware can use wasm files', () => { let next: NextInstance