Unable to use WebAssembly inside a Next.js project

[Elias-Graf]

What version of Next.js are you using?

11.0.1

What version of Node.js are you using?

15.6.0

What browser are you using?

Edge

What operating system are you using?

Windows

How are you deploying your application?

npm run dev

Describe the Bug

I may create a new webpack project that imports WebAssembly without even needing configuration. In Next.js I cannot get it to work, with, or without configuration.

Without any configuration in next.config.js I get:

TypeError: Only absolute URLs are supported

If I add the configuration described here I get:

Module not found: Can't resolve 'wbg' in

Here the WebAssembly (rust) source code in case it is of any help:

// lib.rs
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub struct User {
    #[wasm_bindgen(skip)]
    pub first_name: String,
    #[wasm_bindgen(skip)]
    pub last_name: String,
}

#[wasm_bindgen]
impl User {
    #[wasm_bindgen(constructor)]
    pub fn new(first_name: String, last_name: String) -> User {
        User {
            first_name,
            last_name,
        }
    }

    #[wasm_bindgen(setter)]
    pub fn set_first_name(&mut self, first_name: String) {
        self.first_name = first_name;
    }
    #[wasm_bindgen(setter)]
    pub fn set_fast_name(&mut self, last_name: String) {
        self.last_name = last_name;
    }
}

#[wasm_bindgen]
pub fn format_username(user: &User) -> String {
    format!("{} {}", user.first_name, user.last_name)
}

Expected Behavior

I would expect that I could easily configure Next.js to use WebAssembly, but I cannot find any clear documentation at the moment. Preferably I wouldn't need to configure anything.

To Reproduce

First checkout the plain webpack repository:

git clone https://github.com/Elias-Graf/wasm_webpack_test
cd wasm_webpack_test
npm install
npx webpack --mode=development
// Now launch the index.html with some sort of server (VSCode Live Server is an easy one)

It works without configuration (at least for me).

Now the Next.js repository:

git clone https://github.com/Elias-Graf/wasm_nextjs_test
cd wasm_nextjs_test
npm install
npm run dev
// Navigate to the page and gaze upon the error

[Elias-Graf]

I've gotten it to work with the latest nextjs version (11.1.2) and using the following component:

import React, { ReactElement, useCallback } from "react";

export default function LazyJSONIndex(): ReactElement {
	const getRefAndRunWasm = useCallback(async (node) => {
		const { run } = await import("<path to wasm>");

		run(node);
	}, []);

	return <div ref={getRefAndRunWasm} />;
}

of course, the code changed a bit and this solution doesn't really match anymore with the example provided, so here the start of my lib.rs in case it is of use to anyone.

#[wasm_bindgen]
pub fn run(cont: &HtmlElement) -> Result<(), JsValue> {

[reggie3]

Thank you for posting this, @Elias-Graf. What did you use for the <path to wasm> in your corrected example above?

[Elias-Graf]

@reggie3 const { run } = await import("./wasm/lazyjson_wasm");, but that would be different in your case.

[reggie3]

@Elias-Graf Thanks for the response. I realized that I'm on Next 12 and with some work, I was able to get the following working locally, but not in build due to this existing issue that is documented here: #29362

import * as wasm from "hello-wasm";

 let result = wasm.fibonacci(36);

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.