Wasm-bindgen: Tracking issue for Parcel compatibility

[mvlabat]

Hi! This is not a bug report (for now I think there isn't any), but just a support request. I wasn't sure it was right to open the issue in this repository, but it seems to me that here I have more chances to get some help. )

I'm trying to get "greet" example (from readme) working with Parcel.

On Rust side everything is compiled successfully. I run wasm-bindgen target/wasm32-unknown-unknown/debug/js_hello_world.wasm --out-dir . command and then import the generated js file like this:

import { greet } from "./js_hello_world.js";

After that I run parcel to build everything as is. But when opening the page in browser I get the following error in console:

Uncaught Error: Cannot find module './js_hello_world_bg'

Parcel expects js_hello_world_bg file to have js extension, but not wasm. Modifying import statement appending wasm to the module path fixes the error, but then I get another one:

Uncaught (in promise) TypeError: WebAssembly Instantiation: Imports argument must be present and must be an object

I don't know how to fix this one. I would be grateful for any help. Thank you!

[alexcrichton]

Thanks for the report! I think this is similar to https://github.com/rustwasm/wasm-bindgen/issues/154 in that parcel doesn't have enough support for wasm at the moment to get this natively working (unfortunately)

[alexcrichton]

Hm although actually I'm gonna leave this open to track parcel support!

[xtuc]

FYI https://github.com/parcel-bundler/parcel/issues/1325

[catsigma]

I've made a plugin to solve this issue.
https://www.npmjs.com/package/parcel-plugin-wasmbindgen

It works for me.

(Currently the package name is parcel-plugin-wasm.rs)

[fitzgen]

@catsigma where is the source located? I don't see a repo link from the npm page

[catsigma]

@fitzgen https://github.com/catsigma/parcel-plugin-wasm.rs

[fitzgen]

@catsigma this is a nice start! For us to promote the plugin, I think we would want:

• [ ] documentation describing what this is, how to use it, etc
• [ ] use wasm-pack instead of implementing its orchestration of cargo build --target wasm32-unknown-unknown, running the wasm-bindgen CLI, and all that. See https://github.com/wasm-tool/wasm-pack-plugin for example (webpack version).
• [ ] Eventually, something like https://github.com/rustwasm/rust-webpack-template

[catsigma]

@fitzgen thanks, I'll mod the plugin according to your tips.

[sendilkumarn]

@catsigma this looks great, can we rename the plugin to parcel-plugin-rustwasm (if it is okay)

let me know if you need any help.

[catsigma]

@sendilkumarn
yes, I'd love to.
I'm going to let it support both wasm-pack and cargo & wasm-bindgen(if wasm-pack is missing).

[catsigma]

@sendilkumarn the name parcel-plugin-rustwasm has been taken. I'm using the name wasm.rs.
github: https://github.com/catsigma/parcel-plugin-wasm.rs
npm: https://www.npmjs.com/package/parcel-plugin-wasm.rs

And it supports both wasm-pack and wasm-bindgen-cli now.

[sendilkumarn]

@catsigma a great work, thanks 👍

[sendilkumarn]

@catsigma check this out.

@fitzgen will transfer the repo once the repo is created.

[catsigma]

@sendilkumarn 
Great! Thank you for telling me.

Sunday, September 23, 2018, 19:11 +0800 from [email protected] [e-mail]:

@catsigma check this out.
@fitzgen will transfer the repo once the repo is created.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub , or mute the thread .

[alexcrichton]

I'm gonna close this in favor of https://github.com/rustwasm/rust-parcel-template now, new issues should go there!

[0xcaff]

This issue should be re-opened as parcel doesn't work with the generated stub and the way rust-parcel-template works doesn't allow for using the typescript typings.

[mvlabat]

@0xcaff hello! What problem do you have exactly? And could you clarify what do you mean by "doesn't allow for using the typescript typing"? I didn't work with typescript, but my JS project works great at the moment.

Would be glad to help!

[0xcaff]

Hey @mvlabat !

When using rust-parcel-template, with an import like the following:

import module from '../crate/Cargo.toml'

typescript doesn't know the type of module. It compiles just fine because parcel's typescript compilation doesn't seem to fail on type errors, but all of the tooling reports errors (tsc --noEmit, IDEs) about the type not being known.

Usually, you can tell typescript to use certain types for a module with ambient module declarations, but ambient module declarations don't seem to work with relative paths.

wasm-bindgen already generates the typings, but typescript needs to be told about them outside of the build step so development tools work.

The way that probably fits this use case best is building with wasm-pack and publishing to NPM, but the imported NPM module doesn't work with parcel (even with parcel-plugin-wasm.rs).

[skyne98]

@0xcaff, for now there is a work-around I found.

• Create an index.d.ts file where your index.ts (or index.js) is
• Add following to it

declare module "*.toml" {
    const value: typeof import('../crate/pkg/rust_parcel');
    export default value;
}

• Change ../crate/pkg/rust_parcel to fit your folder structure and file names
• Profit, you now have types!

[sliminality]

@skyne98, what do you mean by this?

Change ../crate/pkg/rust_parcel to fit your folder structure and file names

I'm having the same problem, hoping to resolve! When I add the index.d.ts as you describe, I get the following error:

import wasm from "../crate/Cargo.toml"

src/index.ts:2:18 - error TS2792: Cannot find module '../crate/Cargo.toml'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?