WebPack minimize breaks widget.

[Dzeri96]

I'm using annotorious-openseadragon (v. 2.5.7) in a simple Vue (v. 3.2.20) project and I'm having issues with my annotation widgets not displaying correctly when minification is enabled in WebPack.
To spare you the details, I have a block of code in the widget function that adds some buttons to a div container, just like in the tutorial:

// Some code
var button1 = createButton('Figure', 'Figure', 'class');
            var button2 = createButton('Table', 'Table', 'class');
            var button3 = createButton('Caption', 'Caption', 'class');

            container.appendChild(button1);
            container.appendChild(button2);
            container.appendChild(button3);
// More code
console.log(`returning root: ${root.outerHTML}
return root;

The problem is that, when building the application with default settings, which include minification, I can see in the console output that the code is called, and that the element's outerHtml looks correct, but it simply doesn't show up in the DOM. When adding

optimization: {
      minimize: false
    }

to the webpack configuration in vue.config.js, the code is obviously way larger, but it works correctly.

What could be causing this issue? I'm trying to figure out which version of webpack the vue cli (v. 4.5.14) is using, but I haven't been able to find any concrete information. I've tried adding the TerserPlugin like in this example, but to no avail.

[rsimon]

Does the widget show up in development mode?

When you initialize Annotorious, can you try adding the following property to the widget?

var anno = Annotorious.init(viewer, {
  widgets: [ 
    { widget: MyWidget, force: 'plainjs' },
    'COMMENT',
    'TAG'
  ]
});

[Dzeri96]

Adding { widget: MyWidget, force: 'plainjs' } did indeed work! Can we get some more info on why this happens, and if one should keep an eye out on other components in code? I mean if this weren't a visual thing, I would have never noticed it.

In any case, thanks for your help, I'm sure many others will come across this question if they search for the right thing. The issue can be closed.

[rsimon]

It's a work in progress... ;-) Docs are definitely coming. But there might be changes before this is fully stable.

Stone background: there's some simple logic built into Annotorious that tests if a widget is vanilla JS or React. The test isn't very reliable, and seems to fail in particular for minified Vue projects. The force option simply skips the automatic test.

That being said: non-React widgets will start to show performance problems once they reach a certain complexity. As I said: there's probably a bigger change on the horizon for the non-React plugin API. Can't yet say when it will happen though.