How can I import WebAssembly rust to NextJS?

Question

Im using nextjs, I'm using an:

import { greet } from "backend";

This is the package.json dependencies:

"dependencies": { "backend": "file:../backend/pkg", "next": "11.1.2", "react": "17.0.2", "react-dom": "17.0.2", "webpack": "^5.52.0" },

This is my config on nextjs.config.js:

module.exports = { 
reactStrictMode: true,
experiments: { asyncWebAssembly: true, buildHttp: true, executeModule: true, layers: true, lazyCompilation: true, outputModule: true, syncWebAssembly: true, topLevelAwait: true, },
}

And this is my error:

Module parse failed: Unexpected character '' (1:0) The module seem to be a WebAssembly module, but module is not flagged as WebAssembly module for webpack. BREAKING CHANGE: Since webpack 5 WebAssembly is not enabled by default and flagged as experimental feature. You need to enable one of the WebAssembly experiments via 'experiments.asyncWebAssembly: true' (based on async modules) or 'experiments.syncWebAssembly: true' (like webpack 4, deprecated). For files that transpile to WebAssembly, make sure to set the module type in the 'module.rules' section of the config (e. g. 'type: "webassembly/async"'). (Source code omitted for this binary file)

Answer 1

You need to edit the next.config.js

https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config

Here is are the contents of my next.config.js file

module.exports = {
    reactStrictMode: true,
    webpack: function (config, options) {
        config.experiments = { asyncWebAssembly: true };
        return config;
    }
}