Module not found: Error: Can't resolve '../pkg/index.js' in '/absolute-project-path/js'
kraenhansen opened this issue · 7 comments
Describe the Bug
Running the start script yields an error.
Steps to Reproduce
- Install the template using
npm init rust-webpack my-app - Change directory into the
templateandnpm install(because of #148) - 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'
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?
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.
Yeah, that's probably the reason: your wasm-pack is way out of date.
You can update it by just installing the latest version.
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
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)?
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.
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).