TypeError: hexoid is not a function when using Akismet API with Formidable Implicit Dependency

[seangray-dev]

I recently encountered an issue within a Next.js application after installing akismet-api version 6.0.0. When I attempt to use the Akismet client in my Next.js route handler, I receive the following error: TypeError: hexoid is not a function.

Environment
Node.js Version: 18.7.0
Next.js Version: 14.3.2
Akismet API Version: 6.0.0

[chrisfosterelli]

@seangray-dev Thanks for the report. Are you able to provide a reproduction (or even an excerpt of what akismet-api function you're calling that is erroring)?

[mobeigi]

Just ran into this too when trying to use the library on a Next.js project.
Here is a trace:

> 1002 | const toHexoId = hexoid(25);
       | ^
  1003 | const DEFAULT_OPTIONS = {
  1004 |   maxFields: 1000,
  1005 |   maxFieldsSize: 20 * 1024 * 1024,
 ⨯ node_modules\formidable\dist\index.cjs (1002:1) @ eval
 ⨯ TypeError: hexoid is not a function
    at eval (webpack-internal:///(rsc)/./node_modules/formidable/dist/index.cjs:1002:18)
    at (rsc)/./node_modules/formidable/dist/index.cjs (C:\Git\mobeigi.com\app\.next\server\vendor-chunks\formidable.js:20:1)
    at __webpack_require__ (C:\Git\mobeigi.com\app\.next\server\webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./node_modules/superagent/lib/node/index.js:20:20)
    at (rsc)/./node_modules/superagent/lib/node/index.js (C:\Git\mobeigi.com\app\.next\server\vendor-chunks\superagent.js:50:1)
    at __webpack_require__ (C:\Git\mobeigi.com\app\.next\server\webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./node_modules/akismet-api/lib/akismet.js:2:17)
    at (rsc)/./node_modules/akismet-api/lib/akismet.js (C:\Git\mobeigi.com\app\.next\server\vendor-chunks\akismet-api.js:19:1)
    at __webpack_require__ (C:\Git\mobeigi.com\app\.next\server\webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./src/payload/collections/Comments/index.ts:13:69)
    at __webpack_require__.a (C:\Git\mobeigi.com\app\.next\server\webpack-runtime.js:100:13)
    at eval (webpack-internal:///(rsc)/./src/payload/collections/Comments/index.ts:1:21)
    at (rsc)/./src/payload/collections/Comments/index.ts (C:\Git\mobeigi.com\app\.next\server\app\(payload)\admin\[[...segments]]\page.js:775:1)
    at __webpack_require__ (C:\Git\mobeigi.com\app\.next\server\webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./src/payload.config.ts:24:88)
    at __webpack_require__.a (C:\Git\mobeigi.com\app\.next\server\webpack-runtime.js:100:13)

Not sure why it happens exactly, I followed a workaround from this PR:
zooniverse/front-end-monorepo#6234

Adding an alias mapping to next.config.mjs:

  webpack(config) {
    config.resolve = {
      ...config.resolve,
      alias: {
        ...config.resolve.alias,
        hexoid: 'hexoid/dist/index.js',
      },
    };

    return config;
  },
};

EDIT: The above change isn't fixing all issues, there are still warnings during production builds.