Skip to main content

React, Vue, Angular, etc.

Here are some examples of how to use cornerstone3D with React, Vue, Angular, etc. We have made it easy to use cornerstone3D with your favorite framework.

Follow the links below to see how to use cornerstone3D with your favorite framework.

Vite​

To update your Vite configuration, use the CommonJS plugin, exclude dicom-image-loader from optimization, and include dicom-parser. We plan to convert dicom-image-loader to an ES module, eliminating the need for exclusion in the future.

import { viteCommonjs } from "@originjs/vite-plugin-commonjs"


export default defineConfig({
  plugins: [viteCommonjs()],
  optimizeDeps: {
    exclude: ["@cornerstonejs/dicom-image-loader"],
    include: ["dicom-parser"],
  },
})

Webpack​

For webpack, simply install the cornerstone3D library and import it into your project.

If you previously used

noParse: [/(codec)/],

to avoid parsing codecs in your webpack module, remove that line. The cornerstone3D library now includes the codecs as an ES module.

Also since we are using wasm, you will need to add the following to your webpack configuration in the module.rules section:

{
  test: /\.wasm/,
  type: 'asset/resource',
},

Svelte + Vite​

Similar to the configuration above, use the CommonJS plugin converting commonjs to esm. Otherwise, it will be pending at await viewport.setStack(stack);, the image will not be rendered.

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import { viteCommonjs } from "@originjs/vite-plugin-commonjs"

export default defineConfig({
	plugins: [
		svelte(),
		viteCommonjs(),
	],
	optimizeDeps: {
		exclude: ["@cornerstonejs/dicom-image-loader"],
    include: ["dicom-parser"],
  }
})
Tip

If you are using sveltekit, and config like plugins: [ sveltekit(), viteCommonjs() ], viteCommonjs() may not work. Try replace sveltekit with vite-plugin-svelte and it will work.