[Bug] Cannot run nifti loader in react: fflate import error

[albagarrey]

Describe the Bug

Fflate is a dependency of nifti-reader-js and it seems to be installed (version 0.8.1). However, fflate functions are not found when called from nifti-reader-js.

Steps to Reproduce

1. Clone this repo: https://github.com/Chesneynl/nifti-loader-with-error
2. yarn install
3. yarn dev

The current behavior

Uncaught (in promise) TypeError: fflate.decompressSync is not a function
    at Object.decompress (nifti.ts:120:1)
    at fetchAndAllocateNiftiVolume (fetchAndAllocateNiftiVolume.ts:121:1)

The expected behavior

Load nifti without importing errors. Please ignore the other errors in the repo, as it was created just for testing purposes.

OS

MacOS

Node version

Browser

Chrome 119.0.6045.159

[albagarrey]

Hello @sedghi. This is the issue we commented on the last Office Hours. Hope it helps to replicate the error! Thanks :)

[sedghi]

can you please update the code so that it only gives error for the related parts?

[Chesneynl]

@sedghi Code is updated to only show the related error

[pcanas]

@sedghi We have a working project displaying the error, using cornerstone’s version 1.32.2 and nifty-reader-js version 0.6.6.

Your petct example does work well. It uses cornerstone’s version 1.32.1 (I do not think the version difference is the issue) and nifty-reader-js version 0.6.6.

On the nifty reader js side, they also provided a working project in https://github.com/rii-mango/NIFTI-Reader-JS/issues/39#issuecomment-1862750251

[gosvig123]

@sedghi , just adding context here

Below is a working example. https://github.com/cornerstonejs/cornerstone3D

The example contains a pretty serious amount of webpack config to make sure it's functional in the context. The loader with error shared earlier in this thread contains a basic example setup using CRA, but which fails.

The initially referenced error seems to be related to the fact that the source maps are not being correctly mapped and as such needs to be adjusted in the bundler config, but after having attempted that I am still seeing the error above.

Do you have any ideas on how to solve it, have tried in a few different contexts now with no luck. Thanks and have a great week!

[sedghi]

@gosvig123 did you guys find a solution for this?

[gosvig123]

@sedghi , we eventually found a solution to custom bundle.

In our case this will do the trick, hope that is useful.

  webpack: function (config, env) {
    config.module.rules = config.module.rules.map((rule) => {
      if (rule.oneOf instanceof Array) {
        rule.oneOf[rule.oneOf.length - 1].exclude = [
          /\.(js|mjs|jsx|cjs|ts|tsx)$/,
          /\.html$/,
          /\.json$/,
        ];
      }
      return rule;
    });
    return config;
  },

[TomWartm]

@albagarrey, @gosvig123 did you find a solution, or how did you solve the issue? I am encountering the same error in my React application