fflate.decompressSync is not a function when using `nifti-reader-js` (React)

[Pablo Cañas Castellanos]

How to reproduce

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

package.json dependencies are

    "fflate": "^0.8.1",
    "nifti-reader-js": "^0.6.8",

The problem

We get an error because the fflate functions are not found

These are found when I am navigating my project, so it might have to do with the bundling...

[101arrowz]

This is most likely an issue with the bundler. Webpack's tree shaking has always been a bit suspicious - I'll look into what specifically is causing this.

[Pablo Cañas Castellanos]

@101arrowz any updates?

[101arrowz]

This will take me a few more weeks to get to, sorry for the delay!

[Kristian Gosvig]

@101arrowz , thanks for looking into this and happy new year.
Just wanted to check in to see if you had any more context on this?

[Pablo Cañas Castellanos]

This will take me a few more weeks to get to, sorry for the delay!

@101arrowz Hi, any updates? Thanks!

[101arrowz]

Looking into it now. This seems like a Webpack misconfiguration; the require("fflate") call in nifti.js is somehow resolving to a URL in the build (i.e. the string '/static/media/index.145014fd129508e7ec84.cjs' instead of the contents of that file, i.e. the JS module). I'll look into this further to see if this is something that can be easily fixed.

[101arrowz]

Yeah, this is an upstream bug with create-react-app. This can be fixed by using react-app-rewired as suggested here: facebook/create-react-app#12021 (comment). Here's a diff of what I did to fix it:

diff --git a/config-overrides.js b/config-overrides.js
new file mode 100644
index 0000000..7065965
--- /dev/null
+++ b/config-overrides.js
@@ -0,0 +1,11 @@
+module.exports = {
+  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;
+  },
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 3861681..abfa3be 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "vanilla-basic",
   "version": "1.0.0",
   "scripts": {
-    "dev": "react-scripts start",
+    "dev": "react-app-rewired start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
@@ -13,6 +13,7 @@
     "@playwright/test": "^1.22.2",
     "@types/react": "^18.2.28",
     "@types/react-dom": "^18.2.13",
+    "react-app-rewired": "^2.2.1",
     "typescript": "^4.0.5"
   },
   "description": "[Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/overview) allows you to easily build JavaScript apps in minutes. Use this repo with the [quickstart](https://docs.microsoft.com/azure/static-web-apps/getting-started?tabs=vanilla-javascript) to build and customize a new static site.",

There seems to be an unrelated issue with SharedArrayBuffer not being defined due to missing COOP/COEP headers, but that can likely be fixed just by adjusting the Webpack config.

Since this isn't a problem with fflate, I'll close this issue for now. Let me know if you have any other questions.