Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cornerstone events not firing when importing from NPM

See original GitHub issue

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)

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

dannyrbcommented, Jul 18, 2017

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

swederikcommented, Jul 19, 2017

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Cornerstone Tools not loading built in tools - Stack Overflow
Im answering my own question here, I switched to imports and redid some of the code. the following seems to work fine so...
Read more >
cornerstone-core - npm
Cornerstone Core is agnostic to the actual container used to store image pixels as well as the transport mechanism used to get the...
Read more >
react-cornerstone - npm
Start using react-cornerstone in your project by running `npm i react-cornerstone`. There are no other projects in the npm registry using react-cornerstone.
Read more >
events - npm
This implements the Node.js events module for environments that do not have it, like browsers. events currently matches the Node.js 11.13.0 ...
Read more >
cornerstone-tools - npm
Medical imaging tools for the Cornerstone library. Latest version: 6.0.8, last published: 5 months ago. Start using cornerstone-tools in ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found