Module not found: Error: Can't resolve '../pkg/index.js' in '/absolute-project-path/js'

[kraenhansen]

Describe the Bug

Running the start script yields an error.

Steps to Reproduce

1. Install the template using npm init rust-webpack my-app
2. Change directory into the template and npm install (because of #148)
3. Start the webpack dev server by running npm start

Expected Behavior

I would expect to load the template project and see "hello world" printed in the console of the browser.

Actual Behavior

No visual change in the browser (except for the title of the tab).

The following output in my terminal when running npm start:

> rust-webpack-template@0.1.0 start /absolute-project-path
> rimraf dist pkg && webpack-dev-server --open -d

🧐  Checking for wasm-pack...

✅  wasm-pack is installed. 

ℹ️  Compiling your crate in development mode...

ℹ ｢wds｣: Project is running at http://localhost:8081/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /absolute-project-path/dist
ℹ ｢wdm｣: wait until bundle finished: /

  [1/10] 🦀  Checking `rustc` version...
  [2/10] 🔧  Checking crate configuration...
  [3/10] 🎯  Adding WASM target...
  info: component 'rust-std' for target 'wasm32-unknown-unknown' is up to date
  [4/10] 🌀  Compiling to WASM...
      Finished dev [unoptimized + debuginfo] target(s) in 0.37s
  [5/10] 📂  Creating a pkg directory...
  [6/10] 📝  Writing a package.json...
  ℹ️   [INFO]: Optional fields missing from Cargo.toml: 'repository', 'license'. These are not necessary, but recommended
  [7/10] 👯  Copying over your README...
  [8/10] No LICENSE found in Cargo.toml, skipping...
  [9/10] ⬇️  Installing wasm-bindgen...
  [10/10] 🏃‍♀️  Running WASM-bindgen...
  ✨   Done in 0 seconds
| 📦   Your wasm pkg is ready to publish at ./index.
✅  Your crate has been correctly compiled

✖ ｢wdm｣: Hash: 9bebbdcc68c9f51c960a
Version: webpack 4.34.0
Time: 2055ms
Built at: 2019-06-19 20:11:34
     Asset       Size  Chunks             Chunk Names
index.html  179 bytes          [emitted]  
  index.js    887 KiB   index  [emitted]  index
Entrypoint index = index.js
[0] multi (webpack)-dev-server/client?http://localhost ./js/index.js 40 bytes {index} [built]
[./js/index.js] 48 bytes {index} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {index} [built]
[./node_modules/html-entities/index.js] 231 bytes {index} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {index} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {index} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost] (webpack)-dev-server/client?http://localhost 4.29 KiB {index} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {index} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {index} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.77 KiB {index} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {index} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.63 KiB {index} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {index} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {index} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {index} [built]
    + 18 hidden modules

ERROR in ./js/index.js
Module not found: Error: Can't resolve '../pkg/index.js' in '/absolute-project-path/js'
 @ ./js/index.js 1:0-25
ℹ ｢wdm｣: Failed to compile.

The browser console outputs:

Error: Cannot find module '../pkg/index.js' at webpackMissingModule (index.js?ee1c:1)

[WDS] Live Reloading enabled.

[WDS] Errors while compiling. Reload prevented.

Module not found: Error: Can't resolve '../pkg/index.js' in '/absolute-project-path/js'

[Pauan]

I'm unable to reproduce this. I followed your directions exactly, but everything works fine.

What is your wasm-pack version? What OS are you using?

[kraenhansen]

I'm on MacOS and I'm running wasm-pack 0.6.0 and I have run rustup update, so perhaps thats the root cause.

I don't know how to update wasm-pack? Neither https://github.com/rustwasm/wasm-pack nor https://rustwasm.github.io/wasm-pack/ tells me how to do that.

[Pauan]

Yeah, that's probably the reason: your wasm-pack is way out of date.

You can update it by just installing the latest version.

[kraenhansen]

I'm on wasm-pack 0.8.1 now and the issue persists. I can fix the error by changing the contents of js/index.js to:

import("../index").catch(console.error);

Apparently the output of wasm-bindgen is emitted to disk into the ./index folder:

$ ls -la index

total 328
drwxr-xr-x   9 kraenhansen  staff     288 19 Jun 20:37 .
drwxr-xr-x  16 kraenhansen  staff     512 19 Jun 20:37 ..
-rw-r--r--   1 kraenhansen  staff       1 19 Jun 20:37 .gitignore
-rw-r--r--   1 kraenhansen  staff    1376 19 Jun 20:37 README.md
-rw-r--r--   1 kraenhansen  staff     417 19 Jun 20:37 package.json
-rw-r--r--   1 kraenhansen  staff      80 19 Jun 20:37 rust_webpack_template.d.ts
-rw-r--r--   1 kraenhansen  staff    8092 19 Jun 20:37 rust_webpack_template.js
-rw-r--r--   1 kraenhansen  staff     329 19 Jun 20:37 rust_webpack_template_bg.d.ts
-rw-r--r--   1 kraenhansen  staff  138044 19 Jun 20:37 rust_webpack_template_bg.wasm

[Pauan]

Just to make sure: you tried completely deleting the my-app directory and re-doing all the steps again from scratch (including npm init rust-webpack my-app)?

[kraenhansen]

That fixed it - thanks!

It would be really nice if some assertions were made about the versions of the various tools in the toolchain and nice warnings would be printed if the user is running outdated tools. Especially starting out, its easy to forget which tools you've installed and how, as learning Rust could be a thing you do on-and-off between other things.

[Pauan]

Glad it's working now. Wasm-pack already does that check and outputs a warning, but that feature hasn't been released yet (it should be in the next release).