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

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]

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

You can update it by just installing the latest version.

[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).