Cornerstone events not firing when importing from NPM

Until recently, I had been including cornerstone in my project as a collection of static assets. I’ve recently updated my code to pull in each library as an NPM package to make it easier to manage my dependencies. I’m using WebPack 3 + Vue, and I’m pulling in the following:

import $ from 'jquery';
import * as cornerstone from 'cornerstone-core'
import * as cornerstoneMath from 'cornerstone-math';
import * as cornerstoneTools from 'cornerstone-tools';
import * as cornerstoneWebImageLoader from 'cornerstone-web-image-loader/dist/cornerstoneWebImageLoader.js';

I can’t seem to get any events to emit/trigger from cornerstone. However, all other functionality appears to be working. The only thing I’ve changed is how I pull in my libraries/dependencies.

I’ve tried the following to see if the event is ever fired:

Listening for the event at the container level:

document.querySelector('.dicomImageContainer').addEventListener('CornerstoneImageRendered', function(event){ console.log(event); });
$("div.dicomImage").on("CornerstoneImageRendered", this.onImageRendered);

Watching for event at body: monitorEvents(document.body, 'CornerstoneImageRendered') (chrome console trick)

[dannyrb]

@swederik finally figured this one out.

I’m using Webpack & VueJs. The proposed solution for including jQuery globally is adding something similar to the following to the plugins section:

    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })

I was under the impression that this was working because:

• The viewer would load, cornerstoneTools would function, all was good in the world
• Typing $ in the console would show that jQuery had been loaded

In reality, the plugin provided jQuery in each instance it was needed, but not globally. This allowed everything to build, but I noticed a few wonky issues:

• Certain cornerstoneTools would not activate/work (length, probe, highlight, etc).
• Events for CornerstoneImageRendered would not fire.

As it turns out, I did not have jQuery added globally. ChromeDevTools provides a lightweight instance of $ in the console to make it easier to select DOM elements.

Removing the webpack.ProvidePlugin code and adding the following to my viewer component resolved all issues:

import $ from 'jquery'; // 2.2.4 (matching cornerstoneTools to be safe)
global.$ = require('jquery');

JS isn’t my first language, so I’m sure there’s a more eloquent explanation. The above worked for me – Not a bug with cornerstone, but it would be nice if jQuery did not need to be available globally for cornerstone and cornerstoneTools to work.

[swederik]

Thanks for the write-up. I don’t really know what we can do about this (apart from dropping jQuery) yet though.