vtk.js in quasar



  • 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.



  • 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



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



  • 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


Log in to reply