Integrating cornerstone with nextjs/react

Support
1

I am currently trying to integrate cornerstone into an nextjs react app. Since there is sadly no tutorial, I am struggling quite early. Below I will provide a minimal example for easy reproduction.

  1. Setup a nextjs react app npx create-next-app@latest (default settings for everything)
  2. cd my-app
  3. Start the development server npm run dev and navigate to localhost:3000 in the browser to see that nextjs is running.
  4. Install cornerstone according to Installation | Cornerstone.js
    npm install @cornerstonejs/core @cornerstonejs/tools @cornerstonejs/streaming-image-volume-loader
  5. Add the following line to the top of the file src/app/page.tsx
    import * as cornerstoneTools from "@cornerstonejs/tools";

Observe the error

./node_modules/@icr/polyseg-wasm/dist/ICRPolySeg.wasm
Module parse failed: Unexpected character '' (1:0)
The module seem to be a WebAssembly module, but module is not flagged as WebAssembly module for webpack.
BREAKING CHANGE: Since webpack 5 WebAssembly is not enabled by default and flagged as experimental feature.
You need to enable one of the WebAssembly experiments via 'experiments.asyncWebAssembly: true' (based on async modules) or 'experiments.syncWebAssembly: true' (like webpack 4, deprecated).
For files that transpile to WebAssembly, make sure to set the module type in the 'module.rules' section of the config (e. g. 'type: "webassembly/async"').
(Source code omitted for this binary file)

There is already a thread about this bug, but the solution is using vite as build tool.

Nextjs is using webpack, so a vite solution is sadly not viable.

Modify the next.config.mjs to include the webassembly flags from the error messages:

/** @type {import('next').NextConfig} */

const nextConfig = {
    webpack(config) {
      // config.experiments.syncWebAssembly = true;
      config.experiments.asyncWebAssembly = true;
      return config;
    },
};

export default nextConfig;

This leads to the following error

./node_modules/@icr/polyseg-wasm/dist/ICRPolySeg.wasm
Module not found: Can't resolve 'a'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/@icr/polyseg-wasm/dist/index.js
./node_modules/@cornerstonejs/tools/dist/esm/workers/polySegConverters.js
./node_modules/@cornerstonejs/tools/dist/esm/stateManagement/segmentation/polySeg/registerPolySegWorker.js
./node_modules/@cornerstonejs/tools/dist/esm/stateManagement/segmentation/polySeg/computeAndAddRepresentation.js
./node_modules/@cornerstonejs/tools/dist/esm/stateManagement/segmentation/polySeg/Surface/computeAndAddSurfaceRepresentation.js
./node_modules/@cornerstonejs/tools/dist/esm/stateManagement/segmentation/polySeg/index.js
./node_modules/@cornerstonejs/tools/dist/esm/stateManagement/segmentation/index.js
./node_modules/@cornerstonejs/tools/dist/esm/index.js
./src/app/page.tsx

Does anyone know how to solve this problem?
Is there a tutorial on how to integrate cornerstone and react that I missed?

thank you
Alex

2

I know there are some issues with the Next.js application using OHIF. The problem is not Next.js or OHIF. The problem is actually vite. That doesn’t have complete support for WebAssembly modules and WebWorkers. Although I have a recipe in this link below that I have shown how to integrate with the WIT application. However, that uses a cornerstone 2.0 beta that we are just about to finish wrapping up and release soon.

3

Hello, @AlexanderZeilmann

I am using NX, CRA, and Webpack, and I am facing the same issue as you.
Did you manage to resolve this problem? If so, could you share how you solved it?

Thank you!

4

No I have not solved the problem yet. I was able to reduce the error to a simple setup using only the @icr/polyseg-wasm library and webpack and no other libraries. So like @alireza said, the bug is not in Next.js or cornerstone.

I submitted a bug report to the @icr/polyseg-wasm library here https://bitbucket.org/icrimaginginformatics/polyseg-wasm/issues/2 (the issue is sadly not publicly visible). So far I have not heard back from them.

Since the last commit to the repo was nine months ago, it might not be maintained any longer. In this case, it probably makes sense for cornerstone to drop the @icr/polyseg-wasm dependency or make it optional whenever possible.