I am trying to compile my c++ code to wasm and use it in a web application made with Next.js.
I have been able to compile a simple sample and use it without any issue importing and using it like this:
var wasmModule = await import('../my.wasm');
console.log(wasmModule.sumNumbers(4,6))
Now I am trying to follow the same pipeline but including the usage of a third party library in my c++ code.
I can compile the code correctly, but when I try to use the wasm generated in my application I face the following error:
Maximum call stack size exceeded You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
RangeError: Maximum call stack size exceeded
if I try to import the Wasm using the following code:
WebAssembly.compileStreaming(fetch('../ifc.wasm')).then((module) => {
WebAssembly.instantiateStreaming(
// Fetch the file and stream into the WebAssembly runtime
fetch(module)
).then((result) => result.instance.exports.sumNumbers(1, 1))
})
I get the following error:
SES_UNHANDLED_REJECTION: CompileError: wasm validation error: at offset 1889895: too many exports
Follows my project configurations.
next.config.js:
const nextConfig = {
webpack(config) {
config.experiments = {
layers: true,
asyncWebAssembly: true
};
config.output.webassemblyModuleFilename = 'static/wasm/[modulehash].wasm'
return config
},
}
module.exports = nextConfig
package.json:
{
"name": "test_wasm",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"react": "^18",
"react-dom": "^18",
"next": "14.2.3"
},
"devDependencies": {
"eslint": "^8",
"eslint-config-next": "14.2.3",
"@wasm-tool/wasm-pack-plugin": "^1.7.0",
"concurrently": "^8.2.2",
"copyfiles": "^2.4.1",
"npm-run-all": "^4.1.5",
"wasm-loader": "^1.3.0"
}
}
Following similar issues, I tried settings and packages indicated the following answers on similar questions, like this -> “You may need an appropriate loader to handle this file type” with Webpack and Babel
like installing babel-preset-env, modifying config as shown, but still face the same issue.
do you guys have some tips on what could be the issue?
any help is much appreciated!