Mar 30, 2024

Loading wasm files on Vercel Edge and Node.js runtimes

Loading wasm on the Vercel Edge runtime is easy. You need to do a little more work to do the same on Node.js.

async function getWasmNextJSEdge() {
  // Webpack and Turbopack can tree-shake this.
  if (process.env.NEXT_RUNTIME === 'edge') {
    return (await import('./file.wasm?module')).default
  }
}

async function getWasmNode() {
  if (!process.env.NEXT_RUNTIME || process.env.NEXT_RUNTIME === 'nodejs') {
    const { readFileSync } = await import('fs')
    const { join } = await import('path')
    const wasm = readFileSync(join(process.cwd(), './file.wasm'))
    return await WebAssembly.compile(wasm)
  }
}

async function getWasmNextJSEdge() {
  // Webpack and Turbopack can tree-shake this.
  if (process.env.NEXT_RUNTIME === 'edge') {
    return (await import('./file.wasm?module')).default
  }
}

async function getWasmNode() {
  if (!process.env.NEXT_RUNTIME || process.env.NEXT_RUNTIME === 'nodejs') {
    const { readFileSync } = await import('fs')
    const { join } = await import('path')
    const wasm = readFileSync(join(process.cwd(), './file.wasm'))
    return await WebAssembly.compile(wasm)
  }
}