vtk.js in quasar

vladimirder

I am trying to connect the vtk.js package to the project created in quasar-cli. When using SPA, it turned out to configure the work of the visualization window, however, SSR gives errors on importing modules:

[vue-router] Failed to resolve async component default: SyntaxError: Cannot use import statement outside a module
[vue-router] uncaught error during route navigation:
D:\work\web_CS\client\node_modules\vtk.js\Sources\Rendering\Misc\FullScreenRenderWindow\index.js:1
import macro from 'vtk.js/Sources/macro';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1053:16)
    at Module._compile (internal/modules/cjs/loader.js:1101:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at r (D:\work\web_CS\client\node_modules\vue-server-renderer\build.dev.js:9310:16)
    at Object.vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow (server-bundle.js:1638:18)
    at __webpack_require__ (server-bundle.js:27:30)
    at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./src/components/vtrViewWindow.vue?vue&type=script&lang=js& (js/0.js:15:110)
    at __webpack_require__ (server-bundle.js:27:30)
    at Module../src/components/vtrViewWindow.vue?vue&type=script&lang=js& (js/0.js:170:204)
    at __webpack_require__ (server-bundle.js:27:30)
    at Module../src/components/vtrViewWindow.vue (js/0.js:136:101)
    at __webpack_require__ (server-bundle.js:27:30)
/ -> error during render

On page:

SyntaxError (500)
Cannot use import statement outside a module

The project is being built, and the error appears when you visit the page. However, if you comment out the code for connecting a component with vtk, build, open the page, uncomment, save - the page is displayed correctly without errors.

s.molinari

Um, I don’t know vtk.js, but being it is OpenGL I’d say you’ll not get it working with out some real trickery on the server (with SSR).

You might try putting whatever component you are using to integrate vtk.js with in a QNoSSR component.

https://quasar.dev/vue-components/no-ssr#QNoSsr-API

Or, just drop the idea of using SSR. Why would you need it for such a graphical interface?

Scott

vladimirder

Displayed graphics and geometry operations can be difficult for the client.
QNoSsr didn’t help.

s.molinari

Um, I think you might be using the wrong technologies in general or missunderstanding what vtk.js is supposed to be used for then. vtk.js is built for running in the browser. As their docs say…

What is vtk.js?
vtk.js is a rendering library made for Scientific Visualization on the Web. It adapts the VTK structure and expertise to bring high performance rendering into your browser.

Scott

No More Posting New Topics!

vtk.js in quasar