Create a New Rust/Webpack Project using the rust-webpack Template

InstructorNik Graf

Share this video with your friends

Send Tweet

Previous to this lesson, we set up our own Rust/wasm project from scratch.

The Rust/wasm team ships a template for you to get started right away. In this lesson, you'll see how to initialize the template (assumes you have wasm-pack installed) and see how this template gives you additional custom Rust features in addition to the WasmPackPlugin that will build your library on every file change.

Attila Szeremi
~ 6 years ago

When running npm start, I unfortunately get this:

wasm-pack error: Compiling your crate to WebAssembly
Caused by: Process exited with exit code: 101: `cargo build` did not exit successfully.

stdout:

stderr:

 Downloading crates ...
  Downloaded proc-macro2 v0.4.9
  Downloaded quote v0.6.4
  Downloaded version_check v0.1.4
  Downloaded log v0.4.3
  Downloaded syn v0.15.1
  Downloaded serde_derive v1.0.70
  Downloaded serde v1.0.70
  Downloaded serde_json v1.0.24
  Downloaded syn v0.14.5
  Downloaded itoa v0.4.2
   Compiling unicode-xid v0.1.0
   Compiling version_check v0.1.4
   Compiling serde v1.0.70
   Compiling wasm-bindgen-shared v0.2.25
   Compiling dtoa v0.4.3
   Compiling itoa v0.4.2
   Compiling cfg-if v0.1.5
   Compiling wasm-bindgen v0.2.25
   Compiling log v0.4.3
   Compiling proc-macro2 v0.4.9
   Compiling lazy_static v1.1.0
   Compiling quote v0.6.4
   Compiling syn v0.14.5
   Compiling syn v0.15.1
   Compiling serde_derive v1.0.70
   Compiling serde_json v1.0.24
   Compiling wasm-bindgen-backend v0.2.25
   Compiling wasm-bindgen-macro-support v0.2.25
error[E0277]: the trait bound `&mut syn::Field: quote::ToTokens` is not satisfied
   --> C:\Users\attila\.cargo\registry\src\github.com-1ecc6299db9ec823\wasm-bindgen-macro-support-0.2.25\src\parser.rs:376:44
    |
376 |                 assert_not_variadic(&opts, &field)?;
    |                                            -^^^^^
    |                                            |
    |                                            the trait `quote::ToTokens` is not implemented for `&mut syn::Field`
    |                                            help: consider removing 1 leading `&`-references
    |
    = help: the following implementations were found:
              <syn::Field as quote::ToTokens>
    = note: required for the cast to the object type `dyn quote::ToTokens`

error: aborting due to previous error

For more information about this error, try `rustc --explain E0277`.
error: Could not compile `wasm-bindgen-macro-support`.

To learn more, run the command again with --verbose.

I've created a Github issue for the rust webpack template in case the problem is on their end: https://github.com/rustwasm/rust-webpack-template/issues/57

Rodrigo Silva
~ 6 years ago

same here, Attilla

Attila Szeremi
~ 6 years ago

Alright, issue solved.

I suppose this is a risk of nightly Rust. In the Github issue they said:

rustup update nightly
cargo update
# cd into the `crate/` directory within the project
wasm-pack build

Then cd'ing back into the project directory and doing npm start now works :)

sundaycrafts
~ 6 years ago

Fixed it! Thank you!!

cbrevik
~ 6 years ago

npm init rust-webpack does nothing for me but initiate an "empty" project. I have wasm-pack installed, not really sure what I'm doing wrong.

cbrevik
~ 6 years ago

Of course, a silly mistake by me, the installed npm version did not support init templates. Had to update npm.

Nik Grafinstructor
~ 6 years ago

Glad you figured it out @cbrevik

NK
~ 5 years ago

For anyone else getting an error on npm init rust-webpack, it may be this issue: https://github.com/rustwasm/rust-webpack-template/issues/148. I had to upgrade git, then it worked just fine.

Andrey Kolybelnikov
~ 5 years ago

The new version "@wasm-tool/wasm-pack-plugin": "^0.4.2" generate a different project structure with different code. This course needs either an update or a pointer to the fixed version of the template generator. Otherwise it's not possible to follow.