Problem when trying to setup first VTKJS project

Hello all,

my goal is to have a web app with a bootstrap-powered interface and an embedded VTKJS-based render view to visualize 3D volumes.

I’m trying to use node to build/start my first VTKJS project according to the following page:

However, when trying to run the server ($npm start), the following error message appears:

$ npm start

vtk-js-4@1.0.0 start C:\work\research\web-studies\vtk-js-4
webpack-dev-server --content-base ./dist

throw err;

Error: Cannot find module ‘webpack-cli/bin/config-yargs’
Require stack:

  • C:\XXXXX\vtk-js-4\node_modules\webpack-dev-server\bin\webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object. (C:\work\research\web-studies\vtk-js-4\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions…js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) {
    code: ‘MODULE_NOT_FOUND’,
    requireStack: [
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! vtk-js-4@1.0.0 start: webpack-dev-server --content-base ./dist
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the vtk-js-4@1.0.0 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! C:\Users\XXXX\AppData\Roaming\npm-cache_logs\2020-12-01T14_09_30_514Z-debug.log

Anyone knows what might be wrong with my setup?

Thank you,
Rafael March.

Hi, the latest version of vtk.js now uses webpack 5, and there were some changes regarding webpack dev server. If you replace webpack-dev-server with webpack serve, it should work.

Hi Forrest,

thanks for your reply. I tried

npm install webpack-serve

and I get the same error.

Hi, you should modify your package.json and replace webpack-dev-server --content-base ./dist with webpack serve --content-base ./dist.

It works now. Thank you very much, Forrest!

1 Like

I’ll update the docs to reflect this change.

I ran into this same error regarding webpack-cli/bin/config-yargs following Kitware’s video tutorial series and the above steps seem to have resolved that error but caused another. I initially reported the entire issue here but have since broke it out into a new ticket:

Hope this is helpful to others who experience the same errors.