rustwasm/rust-webpack-template

After running steps webpack error

nestoralonso opened this issue · 14 comments

After running the following commands in a new folder:

npm init rust-webpack
npm install
cd crate
cargo update
wasm-pack build 
cd ..
npm start

I get the following error

ERROR in ./js/index.js
Module not found: Error: Can't resolve '../crate/pkg' in '/Users/x/prjs/egghead-rust/lol2/js'
 @ ./js/index.js 1:0-22
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./js/index.js

My setup is as following on a MacOS:

webpack-dev-server 3.1.9
webpack: 4.20.2
wasm-pack 0.5.1
cfg-if = "0.1.5"
wasm-bindgen = "0.2.25"

xtuc commented

Could you please share the full output? My guess is that the compilation of the crate failed just above.

He is the full output, last time I tried it did work like a charm, you can close the issue:

~/prjs/egghead-rust/gh-issue
08:58 $ npm init rust-webpack
npx: installed 1 in 1.866s
Rust + WebAssembly + Webpack = <3

✔ ~/prjs/egghead-rust/gh-issue [master|✔]
08:58 $ npm i
npm WARN create-rust-webpack@0.1.3 license should be a valid SPDX license expression

added 583 packages from 398 contributors and audited 6912 packages in 14.616s
found 0 vulnerabilities

✔ ~/prjs/egghead-rust/gh-issue [master|✚ 1]
09:00 $ cd crate/

✔ ~/prjs/egghead-rust/gh-issue/crate [master|✚ 1]
09:00 $ cargo update
    Updating crates.io index
    Updating cfg-if v0.1.5 -> v0.1.6
    Removing dtoa v0.4.3
    Updating itoa v0.4.2 -> v0.4.3
    Updating libc v0.2.42 -> v0.2.43
    Updating log v0.4.3 -> v0.4.5
    Updating proc-macro2 v0.4.9 -> v0.4.20
    Updating quote v0.6.4 -> v0.6.8
      Adding ryu v0.2.6
    Updating serde v1.0.70 -> v1.0.80
    Updating serde_derive v1.0.70 -> v1.0.80
    Updating serde_json v1.0.24 -> v1.0.32
    Removing syn v0.14.5
    Removing syn v0.15.1
      Adding syn v0.15.13
    Updating version_check v0.1.4 -> v0.1.5
    Updating winapi v0.3.5 -> v0.3.6


✔ ~/prjs/egghead-rust/gh-issue/crate [master|✚ 2]
09:00 $ wasm-pack build

  [1/9] 🦀  Checking `rustc` version...
  [2/9] 🔧  Checking crate configuration...
  [3/9] 🎯  Adding WASM target...
  info: component 'rust-std' for target 'wasm32-unknown-unknown' is up to date
  [4/9] 🌀  Compiling to WASM...
     Compiling proc-macro2 v0.4.20
     Compiling unicode-xid v0.1.0
     Compiling serde v1.0.80
     Compiling version_check v0.1.5
     Compiling ryu v0.2.6
     Compiling wasm-bindgen-shared v0.2.25
     Compiling itoa v0.4.3
     Compiling cfg-if v0.1.6
     Compiling wasm-bindgen v0.2.25
     Compiling log v0.4.5
     Compiling lazy_static v1.1.0
     Compiling quote v0.6.8
     Compiling syn v0.15.13
     Compiling serde_json v1.0.32
     Compiling serde_derive v1.0.80
     Compiling wasm-bindgen-backend v0.2.25
     Compiling wasm-bindgen-macro-support v0.2.25
     Compiling wasm-bindgen-macro v0.2.25
     Compiling rust-webpack v0.1.0 (/Users/n/prjs/egghead-rust/gh-issue/crate)
  warning: the feature `use_extern_macros` has been stable since 1.30.0 and no longer requires an attribute to enable
   --> src/lib.rs:1:12
    |
  1 | #![feature(use_extern_macros)]
    |            ^^^^^^^^^^^^^^^^^
    |
    = note: #[warn(stable_features)] on by default

      Finished release [optimized] target(s) in 2m 50s
  [5/9] 📂  Creating a pkg directory...
  [6/9] 📝  Writing a package.json...
  [7/9] 👯  Copying over your README...
  ⚠️   [WARN]: origin crate has no README
  [8/9] ⬇️  Installing wasm-bindgen...
  [9/9] 🏃‍♀️  Running WASM-bindgen...
  ✨   Done in 2 minutes
| 📦   Your wasm pkg is ready to publish at "/Users/n/prjs/egghead-rust/gh-issue/crate/pkg".


✔ ~/prjs/egghead-rust/gh-issue/crate [master|✚ 2…2]
09:06 $ cd ..
✔ ~/prjs/egghead-rust/gh-issue [master ↓·4|✚ 2…2]
09:08 $ npm start

> create-rust-webpack@0.1.3 start /Users/n/prjs/egghead-rust/gh-issue
> webpack-dev-server -d

🧐  Checking for wasm-pack...

✅  wasm-pack is installed.

ℹ️  Compiling your crate...

ℹ 「wds」: Project is running at http://localhost:8080/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from /Users/n/prjs/egghead-rust/gh-issue/dist

ℹ 「wdm」: wait until bundle finished: /
  :-) [WARN]: origin crate has no README

✅  Your crate has been correctly compiled

ℹ 「wdm」: Hash: 823adb3ceb591dd57f24
Version: webpack 4.20.2
Time: 56480ms
Built at: 2018-10-23 09:09:03
                           Asset          Size  Chunks             Chunk Names
                       bundle.js       854 KiB    main  [emitted]  main
                     0.bundle.js      14.2 KiB       0  [emitted]
0ac0bc0bd0dbfd8c8413.module.wasm  unknown size       0  [emitted]
                      index.html     272 bytes          [emitted]
Entrypoint main = bundle.js
[./crate/pkg/rust_webpack.js] 4.04 KiB {0} [built]
[./crate/pkg/rust_webpack_bg.wasm] 1.99 MiB {0} [built]
[./node_modules/url/url.js] 22.8 KiB {main} [built]
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./js/index.js 40 bytes {main} [built]
[./js/index.js] 60 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/node-libs-browser/node_modules/punycode/punycode.js] 14.3 KiB {main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 7.78 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 77 bytes {main} [built]
[./node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1.11 KiB {main} [optional] [built]
    + 13 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 419 bytes {0} [built]
    [./node_modules/lodash/lodash.js] 527 KiB {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {0} [built]
ℹ 「wdm」: Compiled successfully.
ℹ 「wdm」: Compiling...
ℹ 「wdm」: wait until bundle finished: /bundle.js
ℹ 「wdm」: Hash: dc0869efebfd70c6bf7d
Version: webpack 4.20.2
Time: 80ms
Built at: 2018-10-23 09:09:03
     Asset       Size  Chunks             Chunk Names
index.html  272 bytes          [emitted]
 + 3 hidden assets
Entrypoint main = bundle.js
[./crate/pkg/rust_webpack.js] 4.04 KiB {0} [built]
    + 27 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
       4 modules
ℹ 「wdm」: Compiled successfully.

I'm able to reproduce this -- it feels like this is something to do with path resolution inside webpack somewhere?

The crate/pkg directory exists but it doesn't have the wasm and js files.

xtuc commented

I'm not sure why it works on my side. Is there a difference between the published version on npm and the git?

@fitzgen did you try with the latest version? It looks like a flaky issue @xtuc I think it should be from the plugin, if there is one.

@fitzgen did you try with the latest version? It looks like a flaky issue @xtuc I think it should be from the plugin, if there is one.

I did it from master.

It looks like it is still using a wasm-pack-plugin that runs wasm-pack in no-install mode or something? Here is what I did and what happened: https://gist.github.com/fitzgen/6db17c724943c39be56dd40e68de8766

Yeah looks like we need a newer version of wasm-pack-plugin because the one getting pulled in is doing no-install mode:

$ grep -rn -C 15 no-install
node_modules/@wasm-tool/wasm-pack-plugin/plugin.js-96-    error('wasm-pack error: ' + err);
node_modules/@wasm-tool/wasm-pack-plugin/plugin.js-97-  }
node_modules/@wasm-tool/wasm-pack-plugin/plugin.js-98-}
node_modules/@wasm-tool/wasm-pack-plugin/plugin.js-99-
node_modules/@wasm-tool/wasm-pack-plugin/plugin.js-100-function spawnWasmPack({
node_modules/@wasm-tool/wasm-pack-plugin/plugin.js-101-  isDebug,
node_modules/@wasm-tool/wasm-pack-plugin/plugin.js-102-  cwd,
node_modules/@wasm-tool/wasm-pack-plugin/plugin.js-103-  withTypeScript
node_modules/@wasm-tool/wasm-pack-plugin/plugin.js-104-}) {
node_modules/@wasm-tool/wasm-pack-plugin/plugin.js-105-  const bin = 'wasm-pack';
node_modules/@wasm-tool/wasm-pack-plugin/plugin.js-106-
node_modules/@wasm-tool/wasm-pack-plugin/plugin.js-107-  const args = [
node_modules/@wasm-tool/wasm-pack-plugin/plugin.js-108-    '--verbose',
node_modules/@wasm-tool/wasm-pack-plugin/plugin.js-109-    'build',
node_modules/@wasm-tool/wasm-pack-plugin/plugin.js-110-    '--target', 'browser',
node_modules/@wasm-tool/wasm-pack-plugin/plugin.js:111:    '--mode', 'no-install',
node_modules/@wasm-tool/wasm-pack-plugin/plugin.js-112-    ...(isDebug ? ['--debug'] : []),
node_modules/@wasm-tool/wasm-pack-plugin/plugin.js-113-    ...(withTypeScript ? [] : ['--no-typescript'])
node_modules/@wasm-tool/wasm-pack-plugin/plugin.js-114-  ];
node_modules/@wasm-tool/wasm-pack-plugin/plugin.js-115-
node_modules/@wasm-tool/wasm-pack-plugin/plugin.js-116-  const options = {
node_modules/@wasm-tool/wasm-pack-plugin/plugin.js-117-    cwd,
node_modules/@wasm-tool/wasm-pack-plugin/plugin.js-118-    env: {
node_modules/@wasm-tool/wasm-pack-plugin/plugin.js-119-      PATH: process.env['PATH']
node_modules/@wasm-tool/wasm-pack-plugin/plugin.js-120-    }
node_modules/@wasm-tool/wasm-pack-plugin/plugin.js-121-  };
node_modules/@wasm-tool/wasm-pack-plugin/plugin.js-122-
node_modules/@wasm-tool/wasm-pack-plugin/plugin.js-123-  return runProcess(bin, args, options);
node_modules/@wasm-tool/wasm-pack-plugin/plugin.js-124-}
node_modules/@wasm-tool/wasm-pack-plugin/plugin.js-125-
node_modules/@wasm-tool/wasm-pack-plugin/plugin.js-126-function runProcess(bin, args, options) {

Ok, I merged the wasm-pack-plugin version bump, and now the crate compiles as expected, but there seems to be some JS error afterwards:

$ npm run build

> create-rust-webpack@0.1.4 build /home/fitzgen/rust-webpack-template
> webpack

🧐  Checking for wasm-pack...

✅  wasm-pack is installed. 

ℹ️  Compiling your crate...

  :-) [WARN]: origin crate has no README

✅  Your crate has been correctly compiled

(node:7700) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'importedNames' of null
    at compilation.hooks.finishModules.tap.modules (/home/fitzgen/rust-webpack-template/node_modules/webpack/lib/wasm/WasmFinalizeExportsPlugin.js:33:36)
    at SyncHook.eval [as call] (eval at create (/home/fitzgen/rust-webpack-template/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:9:1)
    at SyncHook.lazyCompileHook (/home/fitzgen/rust-webpack-template/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.finish (/home/fitzgen/rust-webpack-template/node_modules/webpack/lib/Compilation.js:1150:28)
    at hooks.make.callAsync.err (/home/fitzgen/rust-webpack-template/node_modules/webpack/lib/Compiler.js:539:17)
    at _done (eval at create (/home/fitzgen/rust-webpack-template/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:9:1)
    at _err0 (eval at create (/home/fitzgen/rust-webpack-template/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:20:22)
    at childCompiler.compileTemplate.catch.then.compilationResult (/home/fitzgen/rust-webpack-template/node_modules/html-webpack-plugin/index.js:84:11)
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:7700) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:7700) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
xtuc commented

We could use npm's lockfile to avoid that issue.

The error is actually from Webpack, would you mind opening an issue there?

Looks like there is already an issue open on this: webpack/webpack#8261

Closing in favor of that.

This got fixed in upstream webpack and I just pushed a commit that bumps our webpack to a version that includes the fix.

FWIW, I was getting this error with a conflicting webpack configuration (admittedly copied from a react babel template):

  resolve: {
    extensions: ['*', '.js', '.jsx']
  },

Removing this fixed my issue.

Hello, I get this error when I missed to install :
https://rustwasm.github.io/wasm-pack/installer/

After installing, my project runs.

Thanks.