[Web Client]: Error: [commonjs--resolver] Could not load @nimiq+core-web@2.0.0-alpha.20.3. Unable to build Web Client.

[onmax]

New issue checklist

• I have read all of the README
• I have searched existing issues and this is not a duplicate. I am not completely sure if there is already an open issue about this.

General information

I am trying to build a web app with the new @nimiq-core web client.

Bug report

Expected behavior

Build successfully.

Actual behavior

When running pnpm build I get an error

Expand to see error

maxi@maxi:~/nimiq/my-awesome-nimiq-app$ b

> nimiq-vue-template@0.0.0 build /home/maxi/nimiq/my-awesome-nimiq-app
> run-p type-check "build-only {@}" --


> nimiq-vue-template@0.0.0 build-only /home/maxi/nimiq/my-awesome-nimiq-app
> vite build


> nimiq-vue-template@0.0.0 type-check /home/maxi/nimiq/my-awesome-nimiq-app
> vue-tsc --build --force

vite v5.2.8 building for production...
✓ 38 modules transformed.
x Build failed in 519ms
error during build:
Error: [commonjs--resolver] Could not load /home/maxi/nimiq/my-awesome-nimiq-app/node_modules/.pnpm/@nimiq+core-web@2.0.0-alpha.20.3/node_modules/@nimiq/core-web/bundler/worker-wasm/index_bg.wasm (imported by node_modules/.pnpm/@nimiq+core-web@2.0.0-alpha.20.3/node_modules/@nimiq/core-web/bundler/worker-wasm/index.js): "ESM integration proposal for Wasm" is not supported currently. Use vite-plugin-wasm or other community plugins to handle this. Alternatively, you can use `.wasm?init` or `.wasm?url`. See https://vitejs.dev/guide/features.html#webassembly for more details.
file: /home/maxi/nimiq/my-awesome-nimiq-app/node_modules/.pnpm/@nimiq+core-web@2.0.0-alpha.20.3/node_modules/@nimiq/core-web/bundler/index.js
    at Object.load (file:///home/maxi/nimiq/my-awesome-nimiq-app/node_modules/.pnpm/vite@5.2.8_@types+node@20.12.4/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:49345:19)
    at file:///home/maxi/nimiq/my-awesome-nimiq-app/node_modules/.pnpm/rollup@4.14.0/node_modules/rollup/dist/es/shared/node-entry.js:19594:40
    at async PluginDriver.hookFirstAndGetPlugin (file:///home/maxi/nimiq/my-awesome-nimiq-app/node_modules/.pnpm/rollup@4.14.0/node_modules/rollup/dist/es/shared/node-entry.js:19494:28)
    at async file:///home/maxi/nimiq/my-awesome-nimiq-app/node_modules/.pnpm/rollup@4.14.0/node_modules/rollup/dist/es/shared/node-entry.js:18665:33
    at async Queue.work (file:///home/maxi/nimiq/my-awesome-nimiq-app/node_modules/.pnpm/rollup@4.14.0/node_modules/rollup/dist/es/shared/node-entry.js:19704:32)
 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed.
ERROR: "build-only" exited with 1.
 ELIFECYCLE  Command failed with exit code 1.

Steps to reproduce

npx degit onmax/nimiq-vue-template my-awesome-nimiq-app # https://github.com/onmax/nimiq-vue-template
cd my-awesome-nimiq-app
pnpm install
pnpm build # https://github.com/onmax/nimiq-vue-template/blob/main/package.json#L8

Question or Feature Request

I followed all the current instructions from the docs.

Maybe I miss a configuration option or something, but I might not be the only one, so instead of fixing the error in a private channel, I think is good to have the solution posted publicly.

Related libs

• unwasm
• vite-plugin-wasm

[onmax]

@sisou If you are fine, I would also like to update the docs to have an easy copy-paste documentation. Something like this

Vite

Install

npm install @nimiq/core-web@next vite-plugin-wasm vite-plugin-top-level-await

Update config

// vite.config.ts
import { defineConfig } from 'vite'
import wasm from 'vite-plugin-wasm'
import topLevelAwait from 'vite-plugin-top-level-await'

export default defineConfig({
  plugins: [
    wasm(),
    topLevelAwait(),
  ],
  optimizeDeps: {
    exclude: ['@nimiq/core-web'],
  },
})

I think it is much faster this than reading though the packages. Wdyt?

[sisou]

Is this a bug report or solution report?

The error tells you:

ESM integration proposal for Wasm" is not supported currently. Use vite-plugin-wasm or other community plugins to handle this. Alternatively, you can use .wasm?init or .wasm?url. See https://vitejs.dev/guide/features.html#webassembly for more details.

Does that work for you?

[onmax]

Is this a bug report or solution report?

I guess both. I am not sure if this is a bug or a documentation problem. Or maybe both.

Does that work for you?

That's the problem. I cannot apply that solution without patching the library. The lib fetches the wasm for me. Looking at the file from the lib node_modules/@nimiq/core-web/web/main-wasm/index.js:4303, I see that there is this function:

async function __wbg_init(input) {
    if (wasm !== undefined) return wasm;

    if (typeof input === 'undefined') {
        input = new URL('index_bg.wasm', import.meta.url);
    }
    const imports = __wbg_get_imports();

    if (typeof input === 'string' || (typeof Request === 'function' && input instanceof Request) || (typeof URL === 'function' && input instanceof URL)) {
        input = fetch(input);
    }

    __wbg_init_memory(imports);

    const { instance, module } = await __wbg_load(await input, imports);

    return __wbg_finalize_init(instance, module);
}

So not sure how can I apply wasm?init there.

I only initialise the lib as shown in the docs. See my network store. When running dev, it works as expected.

[sisou]

OK, so your messaging is confusing for me. You report a problem and then in the next comment report how you'd update the documentation. But it doesn't actually work?

I think for vite the /web import might work better, with a manual call to init, have you tried that?

[onmax]

Ok, thanks. It is working now.

Something like this

import init, { Client, ClientConfiguration, type ConsensusState } from '@nimiq/core-web/web'

let client: Client
async function startClient() {
	await init()
	const config = new ClientConfiguration()
	config.network('devalbatross')
	client = await Client.create(config.build())
}

[sisou]

It works for in dev with that? Does it also still work after building and running from dist?

[onmax]

I'm not sure if it works because testnet is down and I don't know how to test it (#2404). But it compiles, which is why I opened the issue.