如何将 WebAssembly rust 导入 NextJS？

Question

我正在使用 nextjs，我正在使用：

import { greet } from "backend";

这是package.json依赖关系：

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

这是我的配置nextjs.config.js：

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

这是我的错误：

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

您需要编辑next.config.js

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

next.config.js这是我的文件的内容

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