Error in production mode using Vite VueJS

Web
1

Hello,

I’m testing the volume rendering feature by loading a .vti file inside the render window. The project is built with Vuejs Vite tools. When I test the app running yarn dev the volume is rendered correctly, but as soon as I build the project yarn build and upload the bundle files on my webserver I got the following errors.

vendor.a818eb0e.js:2109 Uncaught TypeError: Cannot read properties of undefined (reading 'search')
    at I6 (vendor.a818eb0e.js:2109:37)
    at W6 (vendor.a818eb0e.js:2111:29)
    at new <anonymous> (vendor.a818eb0e.js:2111:167)
    at Object.t.setDataArray (vendor.a818eb0e.js:2111:12031)
    at Object.t.setupContent (vendor.a818eb0e.js:2247:735)
    at Proxy.loadVolume (index.e79968b2.js:1:2746)
    at FileReader.t.onload (index.e79968b2.js:1:3876)

Debugging the code I found that the app break at controllerWidget.setupContent(renderWindow, actor, isBackgroundDark);

// Control UI
      const controllerWidget = vtkVolumeController.newInstance({
        size: [400, 150],
        rescaleColorMap: true,
      });
      const background = rgbToDoubleArray(31, 41, 55);
      const isBackgroundDark =
        background[0] + background[1] + background[2] < 1.5;
      controllerWidget.setContainer(vtkWidget.value);
      controllerWidget.setupContent(renderWindow, actor, isBackgroundDark);

Any suggestion? I have copied and pasted the sample project for reading vti files.

Thank you.

2

Does this occur in development mode? It’s hard to follow where the execution goes in the last 3 lines of the stack trace.

3

Hi Forrest, Thank you for your reply. When I run the app in development mode using yarn dev command, it works properly.
How can I provide more info on the problem?

Thank you.

4

I am not sure where a property search is being requested, so I’m left guessing. Can you try to see what the prettified code (devtools can do this) looks like at I6 and W6? Or better yet, see what the 3rd line new <anonymous> is doing. I’ve followed the stack trace as far as I could, and I can’t find where search is being requested.

5

@Forrest Thank you for your feedback. I have enabled source maps so here you can have more details about the issue.

rollup-plugin-web-worker-loader__helper__funcToSource.js:7 Uncaught TypeError: Cannot read properties of undefined (reading 'search')
    at e6 (rollup-plugin-web-worker-loader__helper__funcToSource.js:7:38)
    at t6 (rollup-plugin-web-worker-loader__helper__browser__createInlineWorkerFactory.js:4:17)
    at new <anonymous> (rollup-plugin-web-worker-loader__helper__browser__createInlineWorkerFactory.js:12:22)
    at Object.t.setDataArray (PiecewiseGaussianWidget.js:523:20)
    at Object.t.setupContent (VolumeController.js:123:18)
    at Proxy.loadVolume (VtkWindow.vue:175:24)
    at FileReader.t.onload (App.vue:90:38)

function funcToSource(fn, sourcemapArg) {
    var sourcemap = sourcemapArg === undefined ? null : sourcemapArg;
    var source = fn.toString();
    var lines = source.split('\n');
    lines.pop();
    lines.shift();
    var blankPrefixLength = lines[0].search(/\S/); // <--- Error is here!
    var regex = /(['"])__worker_loader_strict__(['"])/g;
    for (var i = 0, n = lines.length; i < n; ++i) {
        lines[i] = lines[i].substring(blankPrefixLength).replace(regex, '$1use strict$2') + '\n';
    }
    if (sourcemap) {
        lines.push('\/\/# sourceMappingURL=' + sourcemap + '\n');
    }
    return lines;
}

export { funcToSource as f };

Hope this helps to find the cause of the build issue.

Thanky you

6

This appears to be an existing problem with rollup-plugin-web-worker. I will have to investigate to see if there are workarounds.

Do you happen to have a minimal proof-of-concept of a Vite+vtk.js+PiecewiseGaussianWidget project? That would help with looking into this.

7

@Forrest I built a sample project that reproduces the issue. You can download the source code from this link WeTransfer - Send Large Files & Share Photos Online - Up to 2GB Free

The project is a basic VueJS + Vite application. Steps to reproduce to run the example.

npm install
npm run dev

Visit http://localhost:3000 and upload any .vti volume file. In development mode the app seems to work correctly but as soon as I go for production:

npm build

And uploading the dist folder on a web server, I got the error message we discussed.

Extra issues:
in the dev mode, if you check the console there are several warnings in the chrome browser

Schermata 2022-03-20 alle 10.33.19
Schermata 2022-03-20 alle 10.33.191194×412 104 KB

Any hint on that?

Thank you so much for your help. I really appreciate it. :slight_smile:

8

Thanks, I’ll find some time to look into this webworker issue.

The event-related warnings can be ignored, since we need to process touch and wheel events in a manner that doesn’t let the page scroll.

The volume mapper warning means you need to increase the max number of samples (or decrease the sample distance).

9

Hello @Forrest, any update on the issue? Thank you so much.

10

No updates yet. I haven’t gotten the time to work on this. I’ll update this thread when I do.

11

Hello @Forrest, I’m sorry for bothering you, but it’s over one month since I reported the issue and I can not go live with my project because of the build issue.
Could you please give some feedback? I thought the issue was related to Vuejs vite so I tried the Vue CLI approach but I got the same error.

Thank you!

12

Apologies for the prolonged delay. I’ll look at this today.

13

I have a workaround going into vtk.js for now: fix(web-worker-loader): patch/fix vite prod build by floryst · Pull Request #2361 · Kitware/vtk-js · GitHub. This workaround should get your project running in prod.

Hopefully the upstream issue with rollup-plugin-web-worker can be resolved.

14

Thank you so much @Forrest I really appreciate it. Do I need to wait the PR to be merged? In order to get the fix?

Have a nice day

15

It’s been merged. Once the release process is done, you will need to update to vtk.js version 24.5.1.

16

Thank you so much! :slight_smile: