Formidable / Superagent Build Issue With Nextjs & Typescript

[sbeleidy]

Hi,

I am unable to build my nextjs application that uses PubNub. This seems to be due to an issue with the Formidable library (node-formidable/formidable#960) which is a dependency of superagent. Superagent seems to be aware of this issue as well (ladjs/superagent#1786).

The error I am getting is

node_modules/formidable/src/Formidable.js (15:17) @ hexoid
 ⨯ TypeError: hexoid is not a function

When I run npm why formidable, I get:

[email protected]
node_modules/formidable
  formidable@"^2.1.2" from [email protected]
  node_modules/superagent
    superagent@"^8.1.2" from [email protected]
    node_modules/pubnub
      pubnub@"^7.4.5" from the root project

Would you happen to have any recommendations on how I can build my application in the meantime?

Thank you for your time.

[mohitpubnub]

Hi,
Thanks for bringing our attention to this.

Till the time we get updated superagent, Can you give it a try with overriding formidable dependency version and let us know how it goes with it.

In order to override deps, you need to update package.json with desired package version details:
e.g:

{
  "overrides": {
    "pubnub": {
      "superagent": {
        "formidable": "^3.5.1"
      }
    }
  }
}

more info on overrides field is mentioned here

It should be valid for
"node": ">=16.14",
"npm": ">=8.3.0"

[sbeleidy]

Hi @mohitpubnub, thank you for getting back to me on this.

I made the change you suggested, and here's the updated package-lock.json contents to reflect it:

"node_modules/formidable": {
      "version": "3.5.1",
      "resolved": "https://registry.npmjs.org/formidable/-/formidable-3.5.1.tgz",
      "integrity": "sha512-WJWKelbRHN41m5dumb0/k8TeAx7Id/y3a+Z7QfhxP/htI9Js5zYaEDtG8uMgG0vM0lOlqnmjE99/kfpOYi/0Og==",
      "dependencies": {
        "dezalgo": "^1.0.4",
        "hexoid": "^1.0.0",
        "once": "^1.4.0"
      },
      "funding": {
        "url": "https://ko-fi.com/tunnckoCore/commissions"
      }
    },

I am still getting an error in building with a TypeError of a function not defined.

This is also the compilation result in case that's helpful:

 Error: Cannot find module './271.js'
Require stack:
- /Users/username/path/to/project/.next/server/webpack-runtime.js
- /Users/username/path/to/project/.next/server/app/favicon.ico/route.js
- /Users/username/path/to/project/node_modules/next/dist/server/require.js
- /Users/username/path/to/project/node_modules/next/dist/server/load-components.js
- /Users/username/path/to/project/node_modules/next/dist/build/utils.js
- /Users/username/path/to/project/node_modules/next/dist/server/dev/hot-middleware.js
- /Users/username/path/to/project/node_modules/next/dist/server/dev/hot-reloader-webpack.js
- /Users/username/path/to/project/node_modules/next/dist/server/lib/router-utils/setup-dev-bundler.js
- /Users/username/path/to/project/node_modules/next/dist/server/lib/router-server.js
- /Users/username/path/to/project/node_modules/next/dist/server/lib/start-server.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1039:15)
    at /Users/username/path/to/project/node_modules/next/dist/server/require-hook.js:54:36
    at Module._load (node:internal/modules/cjs/loader:885:27)
    at Module.require (node:internal/modules/cjs/loader:1105:19)
    at mod.require (/Users/username/path/to/project/node_modules/next/dist/server/require-hook.js:64:28)
    at require (node:internal/modules/cjs/helpers:103:18)
    at __webpack_require__.f.require (/Users/username/path/to/project/.next/server/webpack-runtime.js:203:28)
    at /Users/username/path/to/project/.next/server/webpack-runtime.js:116:40
    at Array.reduce (<anonymous>)
    at __webpack_require__.e (/Users/username/path/to/project/.next/server/webpack-runtime.js:115:67)
    at Array.map (<anonymous>)
    at __webpack_require__.X (/Users/username/path/to/project/.next/server/webpack-runtime.js:167:22)
    at /Users/username/path/to/project/.next/server/app/favicon.ico/route.js:12:14496
    at Object.<anonymous> (/Users/username/path/to/project/.next/server/app/favicon.ico/route.js:12:14538)
    at Module._compile (node:internal/modules/cjs/loader:1218:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
    at Module.load (node:internal/modules/cjs/loader:1081:32)
    at Module._load (node:internal/modules/cjs/loader:922:12)
    at Module.require (node:internal/modules/cjs/loader:1105:19)
    at mod.require (/Users/username/path/to/project/node_modules/next/dist/server/require-hook.js:64:28)
    at require (node:internal/modules/cjs/helpers:103:18)
    at requirePage (/Users/username/path/to/project/node_modules/next/dist/server/require.js:109:84)
    at /Users/username/path/to/project/node_modules/next/dist/server/load-components.js:59:84
    at async loadComponentsImpl (/Users/username/path/to/project/node_modules/next/dist/server/load-components.js:59:26)
    at async DevServer.findPageComponentsImpl (/Users/username/path/to/project/node_modules/next/dist/server/next-server.js:669:36) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/username/path/to/project/.next/server/webpack-runtime.js',
    '/Users/username/path/to/project/.next/server/app/favicon.ico/route.js',
    '/Users/username/path/to/project/node_modules/next/dist/server/require.js',
    '/Users/username/path/to/project/node_modules/next/dist/server/load-components.js',
    '/Users/username/path/to/project/node_modules/next/dist/build/utils.js',
    '/Users/username/path/to/project/node_modules/next/dist/server/dev/hot-middleware.js',
    '/Users/username/path/to/project/node_modules/next/dist/server/dev/hot-reloader-webpack.js',
    '/Users/username/path/to/project/node_modules/next/dist/server/lib/router-utils/setup-dev-bundler.js',
    '/Users/username/path/to/project/node_modules/next/dist/server/lib/router-server.js',
    '/Users/username/path/to/project/node_modules/next/dist/server/lib/start-server.js'
  ],
  page: '/favicon.ico'
}

This is similar to what was happening previously with Formidable v2. Would you happen to have any other recommendations of things to consider?

Thanks!

[mohitpubnub]

So I investigated further on this, The problem is that formidable v3 is ESM-only and to upgrade the version of formidable, superagent needs some more stuff to work upon.
I don't see any go to solution at the moment as we don't own superagent repo.

If I find something working that can unblock this, I'll post here!

[jazpearson]

We are also seeing this issue, and it's a major concern. We need to upgrade due to security vulnerabilities in earlier versions with vm2.

Our issue comes from an electron app, which uses typescript and webpack.

[mohitpubnub]

@sbeleidy so webpack isn't able to resolve one dependency. Can you give it a try with below changes to next.config.js

const { NormalModuleReplacementPlugin } = require('webpack');

module.exports = {
  webpack: (
    config,
    { isServer }
  ) => {
  ...
    if (!isServer) {
			config.resolve.fallback.fs = false;
			config.resolve.fallback.dns = false;
			config.resolve.fallback.net = false;
		}
		config.plugins.push(
			new NormalModuleReplacementPlugin(
				/^hexoid$/,
				require.resolve('hexoid/dist/index.js')
			)
		);
		return config;
  },
}

It's working in my case. (next 14.0.4)

[mohitpubnub]

@jazpearson What's exact error your app is facing? Can you update your app's webpack configuration similar to nextjs app?Is it with react/vue ?

[mohitpubnub]

So In general, If webpack is not able to resolve hexoid for formidable, Below configuration at webpack configuration should be able to fix it:

configureWebpack: {
...
resolve: {
...
       alias: {
             hexoid: 'hexoid/dist/index.js'
  },
...
}
...
}

[jazpearson]

The error was the same - TypeError: hexoid is not a function

I've been able to reproduce in a simple electron.js application, and then get it working with NormalModuleReplacementPlugin. So hopefully that will give me something to go off.

[sbeleidy]

Thanks @mohitpubnub, that seems to work for me! I appreciate your help.