Module parse failed for wasm module generated by rust wasm-pack

Question

I have been following this tutorial: https://developer.mozilla.org/en-US/docs/WebAssembly/Rust_to_wasm in order to build a Rust library and use it in a VueJS project.

When I run $ wasm-pack build --target web everything compiles fine and a pkg directory is created properly.

I then import my rust function into a typescript file like:

import { run } from '../../../../Rust/skunk/pkg/skunk_lib';

My package.json looks like this:

{
  "name": "skunk_interactive",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "primeicons": "^5.0.0",
    "primevue": "^3.12.6",
    "vue": "^3.0.0",
    "vue-class-component": "^8.0.0-0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@types/jest": "^24.0.19",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.17",
    "@vue/cli-plugin-eslint": "~4.5.17",
    "@vue/cli-plugin-router": "~4.5.17",
    "@vue/cli-plugin-typescript": "~4.5.17",
    "@vue/cli-plugin-unit-jest": "~4.5.17",
    "@vue/cli-plugin-vuex": "~4.5.17",
    "@vue/cli-service": "~4.5.17",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "@wasm-tool/wasm-pack-plugin": "^1.6.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "typescript": "~4.1.5",
    "vue-jest": "^5.0.0-0",
    "webpack": "^4.46.0",
    "webpack-cli": "^4.9.2"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended",
      "@vue/typescript/recommended"
    ],
    "parserOptions": {
      "ecmaVersion": 2020
    },
    "rules": {},
    "overrides": [
      {
        "files": [
          "**/__tests__/*.{j,t}s?(x)",
          "**/tests/unit/**/*.spec.{j,t}s?(x)"
        ],
        "env": {
          "jest": true
        }
      }
    ]
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],
  "jest": {
    "preset": "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
    "transform": {
      "^.+\\.vue$": "vue-jest"
    }
  }
}

When I try to run npm run serve I get the following error:

Module parse failed: Unexpected token (237:57)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/babel-loader/lib/index.js
 * ./node_modules/eslint-loader/index.js
You may need an additional loader to handle the result of these loaders.
|           case 0:
|             if (typeof input === 'undefined') {
>               input = new URL('skunk_lib_bg.wasm', import.meta.url);
|             }
| 

I have had a look at this github issue: https://github.com/rustwasm/wasm_game_of_life/issues/22, where it says that updating your webpack should solve the issue. That post was years ago, and I have the latest version of webpack, and still, this error persists.

I also introduced a webpack.config.js file, though I'm not entirely sure what should go in it.

Any thoughts on what might be going wrong?

Answer 1

I ran into a problem with the '@wasm-tool/wasm-pack-plugin' when using a newer version of Rust to compile the WASM.

I had to add a argument to wasm-pack in the WasmPackPlugin instantiation in webpack.config.js

21   │   plugins: [
22   │     new WasmPackPlugin({
23   │       crateDirectory: __dirname,
24 + │       extraArgs: "--target web"
25   │     }),
26   │   ]

Answer 2

• rust side preperation

in cargo.toml file

[dependencies]
wasm-bindgen="0.2.63"

[lib]
# if you want to integrate your rust code with javascript we use cdylib
crate-type=["cdylib"]

inside rust file

use wasm_bindgen::prelude::*;

Inside .rs file you have to decorate any function or type with #[wasm_bindgen]

#[wasm_bindgen]
#[derive(Clone,Copy)]
pub enum Status{
    Yes,
    No,  
}

• Javascript preparation:

You have to load the content of pkg into your javascript project. there is a package.json file inside pkg, using its name property we are going to load that module inside our project through the package.json in javascript project.

// package.json of your javascript project
"dependencies": {
    // other dependencies
    .....
    // assuming that "name" property of package.json in "pkg" directory is "skunk_lib"
    "skunk_lib": "file:../pkg",
  },

run npm install to load the pkg module. skunk_lib should be in the node_modules

Inside your javascript file:

// skunk_lib is one of our dependencies
import {yourRustFunction} from "skunk_lib";