How to use the webpack dev server with recent vtkjs?

Web
1

Hey,

I recently tried to start a new project using VTK.js.
Using the latest node and NPM from their debian repos on debian stable, the ES6 tutorial from the vtk.js docs failed at the step

> npm install kw-web-suite --save-dev
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: webpack@5.26.3
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^5.1.0" from terser-webpack-plugin@5.1.1
npm ERR!   node_modules/terser-webpack-plugin
npm ERR!     terser-webpack-plugin@"^5.1.1" from webpack@5.26.3
npm ERR!   peer webpack@"^4.0.0 || ^5.0.0" from worker-loader@3.0.7
npm ERR!   node_modules/worker-loader
npm ERR!     worker-loader@"3.0.7" from vtk.js@16.13.0
npm ERR!     node_modules/vtk.js
npm ERR!       vtk.js@"^16.13.0" from the root project
npm ERR!   11 more (babel-loader, clean-webpack-plugin, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^1.12.9 || ^2.2.0 || ^3.x || ^4.x" from parallel-webpack@2.6.0
npm ERR! node_modules/parallel-webpack
npm ERR!   parallel-webpack@"2.6.0" from kw-web-suite@11.1.0
npm ERR!   node_modules/kw-web-suite
npm ERR!     dev kw-web-suite@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/nicoco/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/nicoco/.npm/_logs/2021-03-19T16_44_48_545Z-debug.log

I managed to get something up and running by using vtkjs@beta and replacing --colors by --color in the package.json scripts section.

From there I could npm run build and enjoy vtk.js. However I did not manage to adapt the start script line to work in this context. I tried webpack serve --content-base ./dist but…

> npm start

> vtkjsboilerplate@1.0.0 start
> webpack serve --content-base ./dist

/home/nicoco/src/vtkjsboilerplate/node_modules/webpack-cli/lib/utils/resolve-command.js:33
    return mod(...args);
           ^

TypeError: Class constructor ServeCommand cannot be invoked without 'new'
    at run (/home/nicoco/src/vtkjsboilerplate/node_modules/webpack-cli/lib/utils/resolve-command.js:33:12)
    at Command.<anonymous> (/home/nicoco/src/vtkjsboilerplate/node_modules/webpack-cli/lib/utils/arg-parser.js:34:58)
    at Command.listener [as _actionHandler] (/home/nicoco/src/vtkjsboilerplate/node_modules/commander/index.js:426:31)
    at Command._parseCommand (/home/nicoco/src/vtkjsboilerplate/node_modules/commander/index.js:1002:14)
    at Command._dispatchSubcommand (/home/nicoco/src/vtkjsboilerplate/node_modules/commander/index.js:953:18)
    at Command._parseCommand (/home/nicoco/src/vtkjsboilerplate/node_modules/commander/index.js:970:12)
    at Command.parse (/home/nicoco/src/vtkjsboilerplate/node_modules/commander/index.js:801:10)
    at argParser (/home/nicoco/src/vtkjsboilerplate/node_modules/webpack-cli/lib/utils/arg-parser.js:164:27)
    at runCLI (/home/nicoco/src/vtkjsboilerplate/node_modules/webpack-cli/lib/bootstrap.js:11:24)
    at Object.<anonymous> (/home/nicoco/src/vtkjsboilerplate/node_modules/webpack-cli/bin/cli.js:24:5)

This raises a few questions:

  • Is there an easy solution to get a dev environment with the latest stable vtk.js (I don’t particularly want to use the latest beta, but it’s OK if everything else is broken)
  • If not, is there a way to fix the start script to get a webpack dev server working?
  • What is the recommended approach to start developing a (small) vtk.js app these days?

Thanks for reading me!

2

Hi, the ES6 tutorial is outdated and I’ll be rewriting it. In the meantime, vtk.js v16 does not need kw-web-suite, so you can safely ignore that when installing.

The main points should be:

  • leave out kw-web-suite
  • Use the webpack serve like you’re doing already
3

Thanks. FTR, after several tries, here’s my package.js

  "scripts": {
    "build": "webpack --progress --color --mode development --output-path /var/www/vtkapp",
    "build:release": "webpack --progress --color --mode production --output-path /var/www/vtkapp",
    "start": "webpack serve --mode development --content-base ./dist",
    "commit": "git cz",
    "semantic-release": "semantic-release"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vtk.js": "^16.13.3"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.13.12",
    "autoprefixer": "^10.2.5",
    "babel-loader": "^8.2.2",
    "buffer": "^6.0.3",
    "html-loader": "^2.1.2",
    "readable-stream": "^2.3.7",
    "stream": "^0.0.2",
    "stream-browserify": "^3.0.0",
    "webpack": "^5.27.2",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  }

and webpack.config.js

var path = require('path');
var webpack = require('webpack');
var vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core.rules;

// Optional if you want to load *.css and *.module.css files
// var cssRules = require('vtk.js/Utilities/config/dependency.js').webpack.css.rules;

var entry = path.join(__dirname, './src/index.js');
const sourcePath = path.join(__dirname, './src');
const outputPath = path.join(__dirname, './dist');

module.exports = {
  entry,
  output: {
    path: outputPath,
    filename: 'MyWebApp.js',
  },
  module: {
    rules: [
      { test: /\.html$/, loader: 'html-loader' },
    ].concat(vtkRules),
  },
  resolve: {
    modules: [
      path.resolve(__dirname, 'node_modules'),
      sourcePath,
    ],
    fallback: { "stream": require.resolve("stream-browserify"), "buffer": require.resolve("buffer/") }
  },
};

This seems to work, but if you see anything weird, please share the info. :slight_smile:

1 Like