rust-native-wasm-loader icon indicating copy to clipboard operation
rust-native-wasm-loader copied to clipboard

Unable to chain webpack or Vue-cli to load .wasm

Open Zireael opened this issue 6 years ago • 0 comments
trafficstars

Hi, I'm unable to build a project with .rs/wasm

My demo repository: https://github.com/Zireael/wasm-rust

The closest I'm getting is by using Vue-cli (try running vue-cli-service build on my project) with:

> vue.config.js

    config.module
      .rule("Rust")
      .test(/\.rs$/)
      .use("wasm-loader")
      .loader("rust-native-wasm-loader")
      .options({
        cargoWeb: true,
        name: "/wasm/[name].[hash:8].wasm"
      });

but the compiled .wasm does not get correctly copied into assets folder and instead is copied to build root folder as [hash].rs (it is compiled wasm inside, just with extension .rs) and browser complains that it's incorrect file type:

Error loading Rust wasm module 'arithmetic': TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
:8081/#/:1 Uncaught (in promise) TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

For this I guess I need to figure out how to chain Vue/webpack to get it to copy the output .wasm to /assets folder and with .wasm extension. Would appreciate help.

If I try using example from your git project using webpack (run webpack --mode development) on my project, I'm getting error message:

ERROR in ./src/wasm/rust2/lib.rs
Module build failed (from ./node_modules/rust-native-wasm-loader/dist/index.js):
TypeError: Cannot read property 'slice' of undefined
    at C:\js\_templates\wasm-rust\node_modules\rust-native-wasm-loader\dist\cargo.js:105:30 [...]

> webpack.config.js

          {
            test: /\.rs$/,
            use: [
              { loader: "wasm-loader" },
              {
                loader: "rust-native-wasm-loader",
                options: {
                  cargoWeb: true,
                  name: "/wasm/[name].[hash:8].wasm"
                }
              }
            ]
          }

Have latest Node (12, altho tried 11 too), Vue, Webpack (4), cargo, rust-nightly, emscripten installed. Cargo is added to PATH (Windows 10).

Zireael avatar May 11 '19 20:05 Zireael