Include .wasm files in output trace

[brhx]

Currently it is not possible to import .wasm files through webpack on serverless functions and have them stay present in the resulting serverless build, it marks the file as having not been found

[styfle]

Are you using fs.readFile('./path/to/file.wasm')?

Can you share the steps to reproduce?

[icyJoseph]

Hi @styfle,

I have a somewhat minimal branch that's failing. Perhaps it helps you debug, or actually point me in the right direction.

https://github.com/icyjoseph/next-battlesnake/tree/with-wasm and this is the file doing the import https://github.com/icyJoseph/next-battlesnake/blob/with-wasm/src/pages/api/wasm/index.js

This branch works fine locally, in both development and production builds, however I face the same issue as @sam3d, when publishing to Vercel.

I thought of publishing my snake-rs output to npm and then importing the wasm file as a URL, but would really appreciate if I could just bundle it.

wasm-pack builds into a pkg folder within snake-rs, as said before, locally this works, simply go to localhost:3000/api/wasm and you'll see a valid response.

However when I push to vercel, going to the /api/wasm endpoint triggers the reported issue.

Note that there are tweaks to the next.config.js file to make it work locally.

Thanks!

[styfle]

ESM imports require a file extension. Did you forget to add .wasm here?

https://github.com/icyJoseph/next-battlesnake/blob/043a02d18fa4faa59a7f47affc991ee340688cd6/src/pages/api/wasm/index.js#L5

[icyJoseph]

@styfle Nope, the pkg folder is generated by wasm-pack which outputs not only the wasm file but also a bunch of glue to make it work with JavaScript.

battlesnake_rs.d.ts
battlesnake_rs.js
battlesnake_rs_bg.js
battlesnake_rs_bg.wasm
battlesnake_rs_bg.wasm.d.ts

Where the wasm file is required in the JS files, it is imported as you say:

import * as wasm from "./battlesnake_rs_bg.wasm"

So it's not the extension, it is that it is not reachable when deployed to Vercel.

[styfle]

Can you link to the relevant source code? I'm not seeing import * as wasm from "./battlesnake_rs_bg.wasm" in the repository above.

[icyJoseph]

The thing is that the wasm-pack output is normally placed out of git history, instead, the convention is to publish them to NPM, and install them as dependencies. I've tried this, but it also fails, same error.

To get around this, I build the wasm files as part of my vercel build command.

However, for sake of getting to the bottom of this, I've made a branch where the wasm files and all of the JS/TS used as glue are present.

This link https://github.com/icyJoseph/next-battlesnake/tree/with-wasm-in-git/snake-rs/pkg , points to a branch where the wasm output are included.

I checked if this branch works on Vercel, but unfortunately, I get the same error when trying to reach for that endpoint:

2021-12-02T13:05:54.600Z	319b1dfc-0c40-49ca-96cc-f1f4a998da2e	ERROR	[Error: ENOENT: no such file or directory, open '/var/task/.next/server/chunks/817.wasm'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: '/var/task/.next/server/chunks/817.wasm'
}

It does work locally on development and production mode though.

[styfle]

It seems to find the wasm file just fine with nft.

git clone https://github.com/icyJoseph/next-battlesnake
cd next-battlesnake
git checkout with-wasm-in-git
npm i -g @vercel/nft
nft print snake-rs/pkg/snake_logic.js

It sounds like the issue is Next.js, cc @ijjk

[always-maap]

yep same issue. workaround mentioned here.

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack(config, { isServer }) {
    if (isServer) {
      config.output.webassemblyModuleFilename = './../static/wasm/[modulehash].wasm';
    } else {
      config.output.webassemblyModuleFilename = 'static/wasm/[modulehash].wasm';
    }
    config.experiments = { asyncWebAssembly: true };
    config.optimization.moduleIds = 'named';

    return config;
  },
};

module.exports = nextConfig;

you can check out my repo. building and deploying fine on vercel.

[kachkaev]

Thanks @always-maap! I tried your workaround and it fixed next build. Do you use wasm in API routes or just pages? My Next API route with WASM crashes, details here: #29362 (comment)