如何将 WebAssembly rust 导入 NextJS？答案

【问题标题】：How can I import WebAssembly rust to NextJS?如何将 WebAssembly rust 导入 NextJS？
【发布时间】：2021-09-08 01:23:57
【问题描述】：

我正在使用 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)

【问题讨论】：

您找到解决此问题的方法了吗，如果可以，请与我分享？现在我也有同样的问题。

标签： next.js webassembly

【解决方案1】：

Log 错误来自 Webpack 而不是 next。您需要编辑 webpack.config，以便根据他们的官方网站进行操作

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

你必须传递一个函数，我用过这个并且效果很好

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

【讨论】：