Tutorial has vulnerability warnings and, after fixing those, fails at npm run start.

[chrisdsloan]

I'm following the tutorial at https://rustwasm.github.io/docs/book/game-of-life/hello-world.html and get as far as the npm run start command where I get errors. The only divergence from the instructions were:

After the wasm-pack build command, I got the following warnings:

found 125 vulnerabilities (3 low, 30 moderate, 74 high, 18 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

So, I run npm audit as requested:

wasm-game-of-life/www$ npm audit fix

...

fixed 97 of 125 vulnerabilities in 655 scanned packages
  4 package updates for 28 vulnerabilities involved breaking changes
  (use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)
wasm-game-of-life/www$ npm audit fix --force
npm WARN using --force I sure hope you know what you are doing.

That fixes the vulnerability warning, but the npm run start command fails with error:

wasm-game-of-life/www$ npm run start

> [email protected] start .../wasm-game-of-life/www
> webpack-dev-server

[webpack-cli] TypeError: ["webpack.config",".webpack/webpack.config",".webpack/webpackfile"].flatMap is not a function
    at WebpackCLI.loadConfig (.../wasm-game-of-life/www/node_modules/webpack-cli/lib/webpack-cli.js:1439:15)
    at WebpackCLI.createCompiler (.../wasm-game-of-life/www/node_modules/webpack-cli/lib/webpack-cli.js:1714:33)
    at Command.cli.makeCommand (.../wasm-game-of-life/www/node_modules/@webpack-cli/serve/lib/index.js:81:40)
    at Command.listener [as _actionHandler] (.../wasm-game-of-life/www/node_modules/webpack-cli/node_modules/commander/lib/command.js:482:17)
    at actionResult._chainOrCall (.../wasm-game-of-life/www/node_modules/webpack-cli/node_modules/commander/lib/command.js:1283:65)
    at Command._chainOrCall (.../wasm-game-of-life/www/node_modules/webpack-cli/node_modules/commander/lib/command.js:1177:12)
    at Command._parseCommand (.../wasm-game-of-life/www/node_modules/webpack-cli/node_modules/commander/lib/command.js:1283:27)
    at hookResult._chainOrCall (.../wasm-game-of-life/www/node_modules/webpack-cli/node_modules/commander/lib/command.js:1081:27)
    at Command._chainOrCall (.../wasm-game-of-life/www/node_modules/webpack-cli/node_modules/commander/lib/command.js:1177:12)
    at Command._dispatchSubcommand (.../wasm-game-of-life/www/node_modules/webpack-cli/node_modules/commander/lib/command.js:1077:23)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] start: `webpack-dev-server`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     .../.npm/_logs/2023-05-11T03_45_01_183Z-debug.log

So, obviously, if I had not attempted to fix the vulnerabilities, it might have "worked" but I'm far enough beyond my depth to not know how to evaluate that risk.

My environment is Pop!_OS 20.04 LTS (an Ubuntu variant). npm --version returns "6.14.4." I'm not sure what other context would be helpful.

The debug log mentioned in the error message above is attached:
debug.log

[jcespinoza]

I managed to start the tutorial by installing the latest versions of all packages in www/package.json because npm audit broke it beyond repair for me . The devDependencies look like this now:

"devDependencies": {
    "copy-webpack-plugin": "^11.0.0",
    "hello-wasm-pack": "^0.1.0",
    "webpack": "^5.88.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }

Then I had another warning prompting me to enable webassembly, so I went to edit the www/webpack.config.js file with this extra key:

module.exports = {
  // rest of the config ommited
  experiments: { asyncWebAssembly: true },
};

npm start works fine now.

[amjerm]

I managed to start the tutorial by installing the latest versions of all packages

Thanks @jcespinoza . I want to add that I had to do the additional step of updating the argument to CopyWebPackPlugin in the webpack config

from:

plugins: [new CopyWebpackPlugin(["index.html"])],

to:

plugins: [new CopyWebpackPlugin({ patterns: ["index.html"] })],

My resulting dependencies in package.json were nearly identical to the above:

  "devDependencies": {
    "copy-webpack-plugin": "^11.0.0",
    "hello-wasm-pack": "^0.1.0",
    "webpack": "^5.88.1",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }

[magnus-ISU]

So it seems that the necessary code to get started is: (this works in zsh for sure)

cargo generate --git https://github.com/rustwasm/wasm-pack-template # Type wasm-game-of-life
cd wasm-game-of-life
wasm-pack build
npm init wasm-app www
# Fix dependencies. We will first install sd to make replacing text easier and cross-platform and rusty.
cargo install sd
sd '  "devDependencies": \{
    "hello-wasm-pack": "\^0.1.0",
    "webpack": "\^4.29.3",
    "webpack-cli": "\^3.1.0",
    "webpack-dev-server": "\^3.1.5",
    "copy-webpack-plugin": "\^5.0.0"
  \}' ' "dependencies": {
    "wasm-game-of-life": "file:../pkg"
  },
  "devDependencies": {
    "copy-webpack-plugin": "^11.0.0",
    "hello-wasm-pack": "^0.1.0",
    "webpack": "^5.90.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }' www/package.json
cd www
rm package-lock.json
npm install
# Fix webpack config
sd -F "new CopyWebpackPlugin(['index.html'])" 'new CopyWebpackPlugin({ patterns: ["index.html"] })' webpack.config.js
sd '^\}' '  experiments: { asyncWebAssembly: true },\n}' webpack.config.js
npm run start