如何在 gatsby js 中导入 rust WASM 模块？

Question

我正在尝试在我的 gatsby 项目中使用 rust webassembly 书中的 rust 模块。当我尝试像这样导入模块时：

import { <rust-struct> } from 'rust_wasm_npm_package';

我收到以下错误：

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)

我无法将实验选项添加到 gatsby 配置文件，所以我不确定将 wasm-pack rust 模块导入 gatsby 的最佳方法是什么。

Answer 1

我可以通过使用以下代码添加一个 gatsby-node.js 文件来完成这项工作：

exports.onCreateWebpackConfig = ({ actions }) => {
    actions.setWebpackConfig({
        experiments: {
            syncWebAssembly: true,
        },
    });
};

然后我能够异步导入 Web 程序集。不知道为什么我不需要改用asyncWebassembly: true，但它确实有效！

        // The reason for this useless concatenation
        // is to get rid of a really specific issue
        // with Webpack and WASM modules being imported
        // all in one line.

        /*eslint no-useless-concat: "off"*/
        const module = await import("path/" + "toJSFile.js");
        const memModule = await import("path/" + "toWasmModule.wasm");
        const memory = memModule.memory;
        setMem(memory);