Managed to run helloworld tuto once,with manual tweaking, then it stops working uncomprehensibly

[ydirson]

Where in the docs did you come across this?

Followed https://rustwasm.github.io/book/game-of-life/hello-world.html

Describe what about it does not make sense

After a first try at following the tuto and finally managed to get it working without being sure why, and finally breaking it without understanding why either, I restarted from scratch, recording step after step in this repo.

After each step that changes a file under git control I recorded things into git, with www recorded as a submodule.

At some point, upgrading copy-webpack-plugin to v6 a breaking change pushed me to find a webpack config fix from stackoverflow, and then it worked: the web server did start without error, and my browser was able to get the demo alert.

Note that in my original attempt I did not have to look for that config fix, and had the demo working nevertheless, with some version requirements adjusted.

Now having seen previously that copy-webpack-plugin was at v11 I tried, "why not attempting to go further". As I noted in the last commit, i did not work. I tried a view versions in between, even v7 causing the same issue. So I reverted with the customary git reset --hard, to discover that even that state was broken.

Suspecting that some state persisting beyond my sight in the gitignored dirs, I went with git clean -dxf in both dirs, reran wasm-pack build in topdir, npm install in www, just to meet the apparently permament:

user@perso-dev:www (www=)$ npm run start

> [email protected] start
> webpack-dev-server

[webpack-cli] Failed to load '/home/user/soft/rustweb/wasm-game-of-life/www/webpack.config.js' config
[webpack-cli] Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
 - options[0] should be an object:
   object { patterns, options? }
user@perso-dev:www (www=)$ 

Why does it not make sense?

Even taking into account that now seems to be a moving moment in npm world (but then, are there any stable ones?) , instructions have a reproducibility issue. Newcomers should be able to reach the end of the first tutorial without such problems.

How could we improve it?

Point to a public git repo where a reproducible sequence of instructions can run the project?
Give instructions to use the contents of package-lock.json as they are (they apparently match a state that did work for someone), without npm being allowed to change that?

[ydirson]

Trying that last suggestion of letting package-lock.json as-is, even npm install --package-lock-only does not seem to fit, still yielding:

user@perso-dev:www (www|REBASE 1/10)$ npm install --package-lock-only
npm WARN old lockfile
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile

up to date, audited 656 packages in 8s
...
user@perso-dev:www (www|REBASE 1/10)$ git diff --stat
 package-lock.json | 5993 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------------------------------
 1 file changed, 3595 insertions(+), 2398 deletions(-)
...

diff --git a/package-lock.json b/package-lock.json
index 7d1e6d8..d37ab29 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,139 +1,154 @@
 {
   "name": "create-wasm-app",
   "version": "0.1.0",
-  "lockfileVersion": 1,
+  "lockfileVersion": 3,
   "requires": true,

(and then 9000 lines of differences, which I find it hard to trust to pull the exact same set of packages)

Apparently the user should be instructed to install a specific npm version, and not to blindly trust the latest lts will work.

Here I have node 20. With n I have to downgrade to node 14 to avoid this rewriting of the lockfile... to hit a webpack-dev-server: not found 🤷

[ydirson]

Maybe also the first tutorials could be adjusted not to use webpack, but instead to use a simpler setup with --target=web, and introduce the bundler mode later on?

[ptdecker]

Maybe also the first tutorials could be adjusted not to use webpack, but instead to use a simpler setup with --target=web, and introduce the bundler mode later on?

Please! Adding webpack only introduces additional issues, questions, and learnings for folks who are not familiar with it as experienced front-end devs. The tutorial should be as stand-alone as possible. I feel the same way with respect to using node for serving the pages. Why not just a bare bones rust-based server like the one from the rust book which folks would already have in their background from learning rust?