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 (https://github.com/node-formidable/formidable/issues/960) which is a dependency of superagent. Superagent seems to be aware of this issue as well (https://github.com/ladjs/superagent/issues/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:

formidable@2.1.2
node_modules/formidable
  formidable@"^2.1.2" from superagent@8.1.2
  node_modules/superagent
    superagent@"^8.1.2" from pubnub@7.4.5
    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 () at __webpack_require__.e (/Users/username/path/to/project/.next/server/webpack-runtime.js:115:67) at Array.map () 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. (/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.