Resolving WebAssembly Module Errors in Cornerstone3D with Next.js

[ohif]

View in #cornerstone3d on Slack

@Rod_Fitzsimmons_Frey: Hi! I’m just diving into cornerstone, apologies if rookie questions should go elsewhere. I’m trying to get some basic functionality going in my next.js app, and I keep running into hurdles with @icr/polyseg-wasm. I punted at first by purging everything referencing @cornerstonejs/tools, and that allowed me to at least get to loading and displaying a dicom. Now I want to start interacting with it, and I can’t get past these build errors.
Importing @cornerstonejs/tools in my code gives me a runtime error:

./node_modules/@cornerstonejs/tools/dist/esm/workers/polySegConverters.js:5:0
Module not found: Can't resolve '@icr/polyseg-wasm'

So I guess I need to add that package as a dependency (is there a way to configure cornerstone to not require it?) So I add it via npm npm install @icr/polyseg-wasm and get this runtime error:

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

I noted in the examples this code:

export async function peerImport(moduleId) {
  if (moduleId === "dicom-microscopy-viewer") {
    return importGlobal(
      "/dicom-microscopy-viewer/dicomMicroscopyViewer.min.js",
      "dicomMicroscopyViewer",
    );
  }

  if (moduleId === "@icr/polyseg-wasm") {
    return import("@icr/polyseg-wasm");
  }
}

so I added it and passed it as the “peerImport” option to core/init(). I get the same error Can't resolve 'a'.
Based on a web search I also modified my webpack configuration with config.experiments = { ...config.experiments, asyncWebAssembly: true }; but it didn’t help.

I’m pretty stuck - this @icr/polyseg-wasm package seems like it’s essential to cornerstone, but I can’t get it to work. Any sage words?

@Alireza_Sedghi: hmmm
I think the issue is somewhere else
let me fix it

it works fine after the bug fix on our nextjs app
check here
https://github.com/cornerstonejs/nextjs-cornerstone3d

cornerstonejs/nextjs-cornerstone3d

@Rod_Fitzsimmons_Frey: Thank you Alireza, I’ll have a look
Thanks, Alireza - it turned out to be this in my webpack config:

    config.module.rules.push({
      test: /\.wasm/,
      type: "asset/resource",
    });

Didn’t see that anywhere else on the web! My original code works great now.