Unable to use with NextJS - `Identifier 'e' has already been declared`

[kwerdna19]

Expected Behavior

Hoping to use Jimp on the with NextJS through client components

Current Behavior

• Oddly everything works as intended when running dev server next dev
• But when building and running built files with next build && next start, Jimp causes the JS bundle to break.

Failure Information (for bugs)

The page will load with a console error:

Uncaught SyntaxError: Identifier 'e' has already been declared (at 17278b49-0d4591d2014ecb83.js:1:185)

The referenced file and line lead to the following minified code:

"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[783],{9072:function(__unused_webpack___webpack_module__,__webpack_exports__,__webpack_require__){let emojiRegex,e,e,e,e,e,e,e,e,e;__webpack_require__.d(__webpack_exports__,{cS:function(){return Jimp}});var ResizeStrategy,ResizeStrategy2,process=__webpack_require__(357)
...

The syntax error (red underline) begins happening at the e,e,e,e,e,e,e,e,e

Occasionally (if spamming refresh), I will also see the generic NextJS error page (Application error: a client-side exception has occurred (see the browser console for more information).) with console errors indicating:

23-fa6adf0081b597ab.js:1 ChunkLoadError: Loading chunk 783 failed.
...
Uncaught Error: Minified React error #423; visit https://react.dev/errors/423 for the full message or use the non-minified dev environment for

Steps to Reproduce

Minimal repro repo: https://github.com/kwerdna19/next-jimp-test

Steps:

git clone https://github.com/kwerdna19/next-jimp-test.git
cd next-jimp-test
npm install
npm run build
npm run start

Then navigate to http://localhost:3000/

Context

Node: v20.16

    "jimp": "^1.6.0",
    "next": "14.2.13",

Any ideas or help are appreciated.

Thanks

[nnst0knnt]

@kwerdna19

Hi!

I encountered the same issue and found a workaround by modifying the webpack configuration. You can exclude the jimp package from minification using Terser, though I believe there may be a more optimal solution.

Here’s an example of how you can implement it in your next.config.mjs:

import TerserPlugin from "terser-webpack-plugin";

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.optimization.minimizer = [
      new TerserPlugin({
        exclude: /node_modules\/jimp/,
        terserOptions: {
          mangle: true,
          compress: {
            drop_console: true,
          },
        },
      }),
    ];

    return config;
  },
};

export default nextConfig;

Please note that this is a temporary workaround, and I believe there is likely a more optimal solution. Also, by overriding config.optimization.minimizer, you’re replacing the default Next.js minimization behavior, which could have potential downsides, such as missing out on future improvements or optimizations that Next.js might apply automatically.

I hope this helps, and I’m hoping that someone will come up with a better idea as well.

[GBvanDam]

@kwerdna19 I am encountering the exact same issue! hope we can bring this to their attention asap!

[r-rayns]

I'm also getting this exact same issue from my built files producing the same error Uncaught SyntaxError: Identifier 'e' has already been declared. When I look at the built file, I can see the duplicate definition:

let emojiRegex,e,e,e,e,e,e,e,e,e

If I set swcMinify in my Next.js config to false the error no longer occurs. This leads me to believe the issue is related to the SWC (Speedy Web Compiler). By setting swcMinify to false Next uses the slower Terser to compile instead.

As I understand it from version 15+ of Next.js there will be no way to turn off the use of the SWC compiler so I'm hoping we can find a fix.

[GBvanDam]

Could it be that https://github.com/jimp-dev/jimp/issues/1355 is talking about the same issue behind the screens?

https://rollupjs.org/troubleshooting/#avoiding-eval is saying things like:

A minifier can't mangle variable names in polluted code, because it can't guarantee that the code to be evaluated doesn't reference those variable names.