Example using nuxt

[BotellaA]

I am trying to use vtk-js inside a nuxt project but I encounter some issues. Do you have an example?

I am looking at your example with webpack but nuxt has different configuration files.

Here what I tried:

nuxt.config.js

const vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.v2.rules;

module.exports = {
  mode: 'universal',

  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
      if (ctx.isServer) {
        config.externals = [
          nodeExternals({
            whitelist: [/^vuetify/]
          })
        ]
      }
     config.module.rules.concat(vtkRules)
    }
  }
}

<script>
import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow';
</script>

 ERROR  Failed to compile with 12 errors                                                                                                                         19:02:52

These dependencies were not found:

* vtk.js/Sources/Rendering/OpenGL/glsl/vtkPolyDataFS.glsl in ./node_modules/vtk.js/Sources/Rendering/OpenGL/StickMapper/index.js, ./node_modules/vtk.js/Sources/Rendering/OpenGL/ImageMapper/index.js and 2 others
* vtk.js/Sources/Rendering/OpenGL/glsl/vtkVolumeVS.glsl in ./node_modules/vtk.js/Sources/Rendering/OpenGL/VolumeMapper/index.js
* vtk.js/Sources/Rendering/OpenGL/glsl/vtkPolyDataVS.glsl in ./node_modules/vtk.js/Sources/Rendering/OpenGL/PolyDataMapper/index.js, ./node_modules/vtk.js/Sources/Rendering/OpenGL/ImageMapper/index.js
* vtk.js/Sources/Rendering/OpenGL/glsl/vtkSphereMapperVS.glsl in ./node_modules/vtk.js/Sources/Rendering/OpenGL/SphereMapper/index.js
* vtk.js/Sources/Rendering/OpenGL/glsl/vtkStickMapperVS.glsl in ./node_modules/vtk.js/Sources/Rendering/OpenGL/StickMapper/index.js
* vtk.js/Sources/Rendering/OpenGL/glsl/vtkVolumeFS2.glsl in ./node_modules/vtk.js/Sources/Rendering/OpenGL/VolumeMapper/index.js
* vtk.js/Sources/Rendering/OpenGL/glsl/vtkVolumeFS.glsl in ./node_modules/vtk.js/Sources/Rendering/OpenGL/VolumeMapper/index.js

[jourdain]

You may have to call config.module.rules.push instead of config.module.rules.concat. Otherwise nothing get's added to the rules...

[BotellaA]

If I use push I get this error:

 ERROR 

  WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
   - configuration.module.rules[11] should be an object.
     -> A rule

[jourdain]

Which also make sense...

vtkRules = [...];
a = [rule1, rule2];

a.push(vtkRules);
=> a = [rule1, rule2, [...]]

a.concat(vtkRules)
=> a same as before

[jourdain]

You can find some documentation on JavaScript arrays here

[BotellaA]

Thanks for your quick answers. I tried several syntaxes but same error as in my first post.

config.module.rules = config.module.rules.concat(vtkRules)
config.module.rules.push(...vtkRules)
config.module.rules.push.apply(config.module.rules, vtkRules)

Sorry I am quite new at JS...

[jourdain]

Try that then

config.module.rules.push({
          test: /\.glsl$/i,
          include: /vtk\.js(\/|\\)/,
          loader: 'shader-loader',
});
config.module.rules.push({
          test: /\.js$/,
          include: /vtk\.js(\/|\\)/,
          loader: 'babel-loader?presets[]=env',
});
config.module.rules.push({
          test: /\.worker\.js$/,
          include: /vtk\.js(\/|\\)/,
          use: [
            {
              loader: 'worker-loader',
              options: { inline: true, fallback: false },
            },
          ],
});

[BotellaA]

Same result...

[jourdain]

Maybe asking on nuxt how to add rules that you want to be applied to some /node_modules/... path, could be a way forward.

[BotellaA]

I was looking for the shader-loader in my node_modules and it was not here. After a npm install, I do not have the glsl error anymore. Probably there was an issue during a previous npm install.

However, I have a new error...

  nuxt:render Rendering url /vtk +54s
{ /home/botella/programming/arnaudbotella.bitbucket.io/node_modules/vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow/index.js:1
(function (exports, require, module, __filename, __dirname) { import macro from 'vtk.js/Sources/macro';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at r (/home/botella/programming/arnaudbotella.bitbucket.io/node_modules/vue-server-renderer/build.js:8330:16)
    at Object.<anonymous> (server-bundle.js:20384:18)
    at __webpack_require__ (webpack:/webpack/bootstrap f669670a10d24b06ee44:25:0)
    at Object.53 (pages/vtk/index.vue?f967:1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap f669670a10d24b06ee44:25:0)
    at Object.49 (pages/vtk/index.vue:1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap f669670a10d24b06ee44:25:0) statusCode: 500, name: 'SyntaxError' }

[jourdain]

It seems to be both.

We use kw-web-suite in our dependencies to bring all the loaders and webpack infrastructure. But it is true that since you are using nuxt, you may have to add those loaders to your dependencies.

Regarding the macro error, this is definitely related to a missing rule to properly transpile the vtk.js code using babel with babel-preset-env (or else).

[BotellaA]

That was an issue on nuxt configuration. Now I get another error but probably caused by nuxt configuration again.

TypeError: Cannot set property console of #<Object> which has only a getter
    at Object.exports.modules.Array.concat.Object.defineProperty.value (node_modules/vtk.js/Sources/macro.js:75:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 496a4d077853872728a6:25:0)
    at Object.exports.modules.Array.concat.Object.defineProperty.value (node_modules/vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow/index.js:9:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 496a4d077853872728a6:25:0)
    at Object.exports.modules.Array.concat._vm (pages/vtk/index.vue?f967:10:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 496a4d077853872728a6:25:0)
    at Object.exports.modules.Array.concat.vtkFullScreenRenderWindow.vtkFullScreenRenderWindow (pages/vtk/index.vue:1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 496a4d077853872728a6:25:0)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7) statusCode: 500, name: 'TypeError' }

[jourdain]

Probably as that does not ring any bell on my end.

[BotellaA]

Thanks for your help