pica: Uncaught ReferenceError: n is not defined

I’m using image-blob-reduce in a next.js app. In dev mode it works fine, but in prod mode, I get this error:

Uncaught ReferenceError: n is not defined

Screenshot 2022-01-17 at 16 30 43

It happens in the pica source:

Screenshot 2022-01-17 at 17 05 08

I already tried turning off Terser, did not change anything.

Do you have any ideas what I could change to get this to work?

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 1
  • Comments: 20 (5 by maintainers)

Commits related to this issue

Most upvoted comments

@puzrin I could get it to work, but not as-is. I needed to modify the pica and image-blob-reduce libs in this way:

  • Added an esm build with rollup to pica. Note that i left out babel for simplicity for now. And note that I only specified module in the package.json and not exports on purpose, because that would cause issues and make image-blob-reduce pick up the non-esm version because it uses requires.
  • Removed webworkify from pica as a quick fix because it uses arguments which later causes a build error in the client project. It also uses some weird require magic which I don’t know if it would work when not built with browserify.
  • Activated the requireReturnsDefault option for the commonjs plugin in the rollup config of image-blob-reduce.
  • Built image-blob-reduce with the pica esm module from my branch.

You can see the code changes here:

And this is the working image-blob-reduce esm module: https://github.com/fabb/image-blob-reduce/blob/pica-esm/dist/image-blob-reduce.esm.mjs

I did not test the non-esm build outputs, so I don’t know if they would still work as expected.

Would you be interested in integrating these changes into your packages? The webworkify part would need to be figured out still, and the non-esm libs of image-blob-reduce would need to be tested.

I ended up using patch-package to force using source version. Works fine so far.

diff --git a/node_modules/image-blob-reduce/package.json b/node_modules/image-blob-reduce/package.json
index f5fcea1..6c66f3b 100644
--- a/node_modules/image-blob-reduce/package.json
+++ b/node_modules/image-blob-reduce/package.json
@@ -21,7 +21,7 @@
     "./package.json": "./package.json",
     "./lib/image_traverse.js": "./lib/image_traverse.js",
     ".": {
-      "import": "./dist/image-blob-reduce.esm.mjs",
+      "import": "./index.js",
       "require": "./index.js"
     }
   },

Too bad that combining browserify + rollup + webpack seems to be problematic

That works. I don’t know why you have problems.

Out of curiosity: is code-deduplication a requirement too, or could the code be duplicated in a string literal in the same file to be used by the web worker?

At current moment i don’t know good alternatives to existing approach. Everything was already considered.

I’m closing this, but if you find anything to mention on readme - let me know.