How do I use WebAssembly with Gatsby?

Summary

I’m trying to use WebAssembly (wasm) generated from Rust code using wasm-pack with my Gatsby site, TableFlow. The proof of concept that I’m trying to get working is from the Rust and WebAssembly Tutorial. Right now I can get it to work in development, but it fails the generation of the SSR bundle fails with this error:

success Rewriting compilation hashes - 0.071s

 ERROR #98123  WEBPACK

Generating SSR bundle failed

WebAssembly module is included in initial chunk.
This is not allowed, because WebAssembly download and compilation must happen asynchronous.
Add an async splitpoint (i. e. import()) somewhere between your entrypoint and the WebAssembly module:
* ./.cache/static-entry.js --> ./.cache/sync-requires.js --> ./src/pages/studio/index.tsx --> ./src/components/studio/workspace/studio.tsx --> ./src/wasm/interpreter.bootstrap.ts --> ./src/wasm/interpreter.wasm.ts --> ./node_modules/interpreter/interpreter.js --> ./node_modules/interpreter/interpreter_bg.wasm
* ... --> ./node_modules/interpreter/interpreter.js --> ./node_modules/interpreter/interpreter_bg.js --> ./node_modules/interpreter/interpreter_bg.wasm
* ... --> ./node_modules/interpreter/interpreter.js --> ./node_modules/interpreter/interpreter_bg.wasm --> ./node_modules/interpreter/interpreter_bg.js --> ./node_modules/interpreter/interpreter_bg.wasm
* ... --> ./node_modules/interpreter/interpreter_bg.js --> ./node_modules/interpreter/interpreter_bg.wasm --> ./node_modules/interpreter/interpreter_bg.js --> ./node_modules/interpreter/interpreter_bg.wasm

File: node_modules/interpreter/interpreter_bg.wasm

not finished Building static HTML for pages - 5.645s

I do have an import() point in interpreter.bootstrap.ts though. I have based this boostrap wrapper off of the rust-webpack-template that I have been looking at. I’m a total webpack novice though, so I’m not quite sure if I should or how to translate the webpack parts over to Gatsby other than knowing it would go under exports.onCreateWebpackConfig = ({...} => actions.setWebpackConfig({...}) in the gatsby-node.js file.

Relevant information

Preferably, I would be able to do local development and not have to push my wasm changes up to npm in order to use them inside of Gatsby. I’m currently importing the wasm package from it’s local source. In the package.json it looks like this: "interpreter": "../interpreter/pkg".

The only wasm + Gastby extension or tutorial that I’ve been able to find is for the gatsby-remark-twitter-card, but it seems to be running at build time only.

There was a very similar question asked in Issue #19072, but it seems like @glfmn never got it working on her site to actually include any wasm.

Environment (if relevant)

System:
    OS: macOS 10.15.4
    CPU: (4) x64 Intel(R) Core(TM) i7-4650U CPU @ 1.70GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.5.0 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 84.0.4147.125
    Firefox: 79.0
    Safari: 13.1
  npmPackages:
    gatsby: ^2.23.12 => 2.23.12
    gatsby-image: ^2.4.9 => 2.4.9
    gatsby-plugin-create-client-paths: ^2.3.10 => 2.3.10
    gatsby-plugin-layout: ^1.3.10 => 1.3.10
    gatsby-plugin-manifest: ^2.4.14 => 2.4.14
    gatsby-plugin-offline: ^3.2.13 => 3.2.13
    gatsby-plugin-react-helmet: ^3.3.6 => 3.3.6
    gatsby-plugin-remove-trailing-slashes: ^2.3.11 => 2.3.11
    gatsby-plugin-sass: ^2.3.12 => 2.3.12
    gatsby-plugin-sharp: ^2.6.14 => 2.6.14
    gatsby-plugin-styled-components: ^3.3.10 => 3.3.10
    gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4
    gatsby-plugin-workerize-loader: ^1.5.0 => 1.5.0
    gatsby-source-filesystem: ^2.3.14 => 2.3.14
    gatsby-transformer-sharp: ^2.5.7 => 2.5.7
  npmGlobalPackages:
    gatsby-cli: 2.12.60

File contents (if changed)

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: `TableFlow - Build Modular Spreadsheets`,
    description: `Build modular professional business and financial modeling spreadsheets`,
    author: `@tableflow`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-remove-trailing-slashes`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `TabeFlow - Build Modular Spreadsheets`,
        short_name: `TableFlow`,
        start_url: `/about`,
        background_color: `#FFFFFF`,
        theme_color: `#4386FA`,
        display: `minimal-ui`,
        // This path is relative to the root of the site.
        icon: `./src/images/tableflow-icon-512.png`,
        cache_busting_mode: `none`,
      },
    },
    {
      resolve: `gatsby-plugin-sass`,
      options: {
        includePaths: [`./src/styles`],
      },
    },
    {
      resolve: `gatsby-plugin-web-font-loader`,
      options: {
        google: {
          families: [`Abel`],
        },
      },
    },
    {
      resolve: `gatsby-plugin-layout`,
      options: {
        component: require.resolve(`./src/components/utils/layout.tsx`),
      },
    },
    {
      resolve: `gatsby-plugin-create-client-paths`,
      options: { prefixes: [] },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    `gatsby-plugin-styled-components`,
    {
      resolve: `gatsby-plugin-workerize-loader`,
      // options: {
      //   preloads: [`interpreter`],
      // },
    },
    {
      resolve: `gatsby-plugin-offline`,
      options: {
        precachePages: [`/about`, `/studio/*`, `/auth/*`],
        workboxConfig: {
          // globPatterns: ["**tableflow-icon*"],
        },
      },
    },
  ],
}

package.json:

{
  "name": "tableflow",
  "private": true,
  "description": "Build modular spreadsheets",
  "version": "0.1.0",
  "author": "TableFlow",
  "dependencies": {
    "@fortawesome/fontawesome-common-types": "^0.2.30",
    "@fortawesome/fontawesome-free": "^5.14.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.30",
    "@fortawesome/free-brands-svg-icons": "^5.14.0",
    "@fortawesome/free-regular-svg-icons": "^5.14.0",
    "@fortawesome/free-solid-svg-icons": "^5.14.0",
    "@fortawesome/react-fontawesome": "^0.1.11",
    "@loadable/component": "^5.13.1",
    "@types/styled-components": "^5.1.1",
    "babel-plugin-styled-components": "^1.10.7",
    "bulma": "^0.9.0",
    "gatsby": "^2.23.12",
    "gatsby-image": "^2.4.9",
    "gatsby-plugin-create-client-paths": "^2.3.10",
    "gatsby-plugin-layout": "^1.3.10",
    "gatsby-plugin-manifest": "^2.4.14",
    "gatsby-plugin-offline": "^3.2.13",
    "gatsby-plugin-react-helmet": "^3.3.6",
    "gatsby-plugin-remove-trailing-slashes": "^2.3.11",
    "gatsby-plugin-sass": "^2.3.12",
    "gatsby-plugin-sharp": "^2.6.14",
    "gatsby-plugin-styled-components": "^3.3.10",
    "gatsby-plugin-web-font-loader": "^1.0.4",
    "gatsby-source-filesystem": "^2.3.14",
    "gatsby-transformer-sharp": "^2.5.7",
    "interpreter": "../interpreter/pkg",
    "lodash": "^4.17.19",
    "node-sass": "^4.14.1",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-bulma-components": "3.4.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^6.1.0",
    "styled-components": "^5.1.1",
    "typescript": "^3.9.7"
  },
  "devDependencies": {
    "@types/reach__router": "^1.3.5",
    "gatsby-plugin-workerize-loader": "^1.5.0",
    "prettier": "2.0.5"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "0BSD",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

gatsby-node.js: N/A (but I imagine something should go in here) gatsby-browser.js: N/A gatsby-ssr.js: N/A

[Yhozen]

@epompeii your solutions does indeed work, however I’m using typescript and splitting the path in two is making all types go away. I ended up writing a file like so

export type IWASMModule = typeof import("../wasm/pkg/wasm")

Which I am not a 100% satisfied with but it is still useful. If anyone reading this have a better solution I’m glad to hear it

[meditating-monkey]

@Yhozen Thank you, I got wasm to work with gatsby 👍🏻