I’ve run into some challenges following the (official) video tutorial series on using VTK.js.
I’m on part 2 and have built a project with the code provided. When I attempt to run npm run dev I receive an error about a missing webpack-cli/bin/config-yargs.
I discovered a former thread in which this issue was discussed and resolved:
(You can look at the above thread to see the full error regarding config-yargs)
I followed the instructions (modifying the package.json to no longer refer to webpack-dev-server and instead used webpack serve as shown below:
"dev": "webpack-dev-server --mode=development",
// changed to:
"dev": "webpack serve --mode=development --content-base=./dist",
Now I receive a different error when running npm run dev:
> vtkex@1.0.0 dev /vtkex
> webpack serve --content-base ./dist
(node:54204) UnhandledPromiseRejectionWarning: TypeError: Class constructor ServeCommand cannot be invoked without 'new'
at run (/vtkex/node_modules/webpack-cli/lib/utils/resolve-command.js:33:12)
at Command.<anonymous> (/vtkex/node_modules/webpack-cli/lib/utils/arg-parser.js:34:58)
at Command.listener [as _actionHandler] (/vtkex/node_modules/commander/index.js:426:31)
at Command._parseCommand (vtkex/node_modules/commander/index.js:1002:14)
at Command._dispatchSubcommand (/vtkex/node_modules/commander/index.js:953:18)
at Command._parseCommand (/vtkex/node_modules/commander/index.js:970:12)
at Command.parse (/vtkex/node_modules/commander/index.js:801:10)
at argParser (/vtkex/node_modules/webpack-cli/lib/utils/arg-parser.js:164:27)
at runCLI (/vtkex/node_modules/webpack-cli/lib/bootstrap.js:11:24)
at Object.<anonymous> (/vtkex/node_modules/webpack-cli/bin/cli.js:24:5)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:54204) UnhandledPromiseRejectionWarning: Unhandled promise rejection.
This error originated either by throwing inside of an async function without a
catch block, or by rejecting a promise which was not handled with .catch(). To
terminate the node process on unhandled promise rejection, use the CLI
flag `--unhandled-rejections=strict`
(see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode).
(rejection id: 2)
(node:54204) [DEP0018] DeprecationWarning: Unhandled promise rejections are
deprecated. In the future, promise rejections that are not handled will terminate
the Node.js process with a non-zero exit code.
I tried changing the package.json file again:
"dev": "webpack --mode=development"
This builds the app successfully but doesn’t execute it.
I altered package.json again:
"dev": "webpack serve --content-base ./dist"
And running npm run dev still causes the same error message.
I then tried installing webpack-server as @Rafael_March did:
$ npm i webpack-serve
$ npm run dev
I tried the same package.json edits I’ve referenced above but they all return the same error (excluding webpack --mode=development which, as noted above, compiles but doesn’t run the app).
I’m hoping someone can help me resolve this issue and will update this thread as I discover more.
I also thought folks might want to know so the official tutorials/docs could be updated since this tutorial series appears to be the primary method of learning vtk.js.
When a resolution is found, I’d like to see the Vimeo video (and separate PowerPoint slides) have text notes overlaid that explain the needed changes to avoid the same issues for others (I know rerecording the entire video may not be feasible).
I also noticed that the example package.json for this project includes calls to web-dev-server:
It may be worthwhile updating these files as well. Once we find the resolution I’m happy to submit a patch to do so, if that is helpful.
I also noticed that the approach used in these tutorials/videos is the older approach of installing vtk.js instead of @kitware/vtk.js. I attempted to migrate my instance from using the older to the newer (as recommended here but ran into some issues and have abandoned the migration for the moment.