Jarrod Boone
Jarrod Boone

Reputation: 63

How do I import a rust WASM module in gatsby js?

I'm trying to use my rust module from the rust webassembly book in my gatsby project. When I try to import the module like so:

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

I get the following error:

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)

I'm unable to add the experiments option to the gatsby config file, so I'm not sure what is the best way to import a wasm-pack rust module into gatsby.

Upvotes: 1

Views: 1169

Answers (1)

Jarrod Boone
Jarrod Boone

Reputation: 63

I was able to get this working by adding a gatsby-node.js file with the following code:

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

I was then able to import the web assembly asynchronously. Not sure why I did not need to use asyncWebassembly: true instead, but it works!

        // 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);

Upvotes: 1

Related Questions