Unable to import wasm from `wasm-bindgen` in the server side

[onmax]

Description

When loading a WASM module compiled with wasm-bindgen in a NuxtHub project on Cloudflare Workers, the module does not start correctly.

As shown in my endpoint, I tried several configurations but all of them produce an error. See the "Attempts" section below for details.

Steps

1. Clone the minimal NuxtHub project that contains the provided configuration and code.
2. Set up nuxt.config.ts with Nitro’s experimental WASM support and add a build:before hook that copies the WASM file from node_modules to the server folder. You can also experiment with the nitro.wasm option for different settings.
3. Deploy the project using NuxtHub.
4. Call the endpoint defined in data.ts that imports and initializes the WASM module.
5. Check the logs and note the 500 error along with the error messages.

Expected behavior

The WASM module should load and initialize without any errors. When the endpoint is called, it should return the expected hex string from the PublicKey conversion.

Minimal reproduction

Only wrangler

A minimal reproduction of the issue is available using only wrangler. The reproduction repository can be found here and it was successfully deployed at this URL. This reproduction works.

With NuxtHub

Another minimal reproduction of the issue is available in the minimal NuxtHub project.

Attempts

Attempt 1: Using import with module query

This approach is based on an example from Pooya: https://stackblitz.com/edit/stackblitz-starters-4rizt7.

You must have nitro: { wasm: { lazy: true, esmImport: true } } in nuxt.config.ts and a build:before hook that copies the WASM file into the server/api folder.

import init, { PublicKey } from '@nimiq/core/web'

export default defineEventHandler(async () => {
  // Also try to import it from: @nimiq/core/web/main-wasm/index_bg.wasm
  const mod = await import('nimiq.wasm?module' as string).then(m => m.default)
  await init(mod)
  const publicKey = '82d80b86d9bf1906832e9f0ba4fa69018792f59190075c396b0e85aeac444e55'
  const key = PublicKey.fromHex(publicKey)
  return key.toHex()
})

This approach produces the following error on the server:

[nuxt] [request error] [unhandled] [500],WebAssembly.instantiate(): Import #0 "wbg": module is not an object or function

Attempt 2: Top level import wasm file

import init, { PublicKey } from '@nimiq/core/web'
// Also try to import it from: @nimiq/core/web/main-wasm/index_bg.wasm
import mod from './nimiq.wasm'

export default defineEventHandler(async () => {
  await init(mod)
  const publicKey = '82d80b86d9bf1906832e9f0ba4fa69018792f59190075c396b0e85aeac444e55'
  const key = PublicKey.fromHex(publicKey)
  return new Response(key.toHex())
})

This approach produces the following error:

[wasm] [error],TypeError: WebAssembly.instantiate(): Import #0 "wbg": module is not an object or function
Error: The script will never generate a response.

Notes

Currently, @nimiq/core does not support importing files in non-browser runtimes. To work around this, you need to patch @nimiq/core and modify the package.json, as shown in this patch file.

[pi0]

Can you make a minimal reproduction with Nitro only?

[onmax]

I have create it with Nitro only, but I am unable to run it locally:

• Stackblitz: https://stackblitz.com/~/github.com/onmax/nitro-nimiq-core-wasm
• Github: https://github.com/onmax/nitro-nimiq-core-wasm

Any guidance is appreciate it.

[pi0]

Thanks 🙏🏼 I will check later when could. Just so I don't forget about it, please feel free to open issue in nitro repo as well.

[onmax]

I open a different issue in Nitro.

The main difference is that I couldn't make the dev server work in the nitro reproduction, whereas in NuxtHub project I was able to run the project locally, but I got the error once it was deployed.

Not sure if this is important, but I will leave both issues open, as they are a bit different.

Thank you for you effort and help :)