Error when just import the package

[matheusrocha89]

I am trying to use the client node with a nextjs project and when I am importing the pipedrive I am getting this error:

Import trace for requested module:
./src/app/api/deal/route.ts
 ⨯ node_modules/formidable/src/Formidable.js (15:17) @ hexoid
 ⨯ TypeError: hexoid is not a function
    at eval (webpack-internal:///(rsc)/./node_modules/formidable/src/Formidable.js:10:18)
    at (rsc)/./node_modules/formidable/src/Formidable.js (/Users/matheus.rocha/Developer/atlantic-signup/.next/server/vendor-chunks/formidable.js:20:1)
    at __webpack_require__ (/Users/matheus.rocha/Developer/atlantic-signup/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./node_modules/formidable/src/index.js:4:20)
    at (rsc)/./node_modules/formidable/src/index.js (/Users/matheus.rocha/Developer/atlantic-signup/.next/server/vendor-chunks/formidable.js:60:1)
    at __webpack_require__ (/Users/matheus.rocha/Developer/atlantic-signup/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./node_modules/superagent/lib/node/index.js:133:18)
    at (rsc)/./node_modules/superagent/lib/node/index.js (/Users/matheus.rocha/Developer/atlantic-signup/.next/server/vendor-chunks/superagent.js:50:1)
    at __webpack_require__ (/Users/matheus.rocha/Developer/atlantic-signup/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./node_modules/pipedrive/dist/ApiClient.js:12:42)
    at (rsc)/./node_modules/pipedrive/dist/ApiClient.js (/Users/matheus.rocha/Developer/atlantic-signup/.next/server/vendor-chunks/pipedrive.js:20:1)
    at __webpack_require__ (/Users/matheus.rocha/Developer/atlantic-signup/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./node_modules/pipedrive/dist/index.js:4530:41)
    at (rsc)/./node_modules/pipedrive/dist/index.js (/Users/matheus.rocha/Developer/atlantic-signup/.next/server/vendor-chunks/pipedrive.js:440:1)
    at __webpack_require__ (/Users/matheus.rocha/Developer/atlantic-signup/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./src/app/api/deal/route.ts:6:67)
    at (rsc)/./src/app/api/deal/route.ts (/Users/matheus.rocha/Developer/atlantic-signup/.next/server/app/api/deal/route.js:380:1)
    at __webpack_require__ (/Users/matheus.rocha/Developer/atlantic-signup/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapi%2Fdeal%2Froute&page=%2Fapi%2Fdeal%2Froute&appPaths=&pagePath=private-next-app-dir%2Fapi%2Fdeal%2Froute.ts&appDir=%2FUsers%2Fmatheus.rocha%2FDeveloper%2Fatlantic-signup%2Fsrc%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=%2FUsers%2Fmatheus.rocha%2FDeveloper%2Fatlantic-signup&isDev=true&tsconfigPath=tsconfig.json&basePath=&assetPrefix=&nextConfigOutput=standalone&preferredRegion=&middlewareConfig=e30%3D!:14:130)
    at (rsc)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapi%2Fdeal%2Froute&page=%2Fapi%2Fdeal%2Froute&appPaths=&pagePath=private-next-app-dir%2Fapi%2Fdeal%2Froute.ts&appDir=%2FUsers%2Fmatheus.rocha%2FDeveloper%2Fatlantic-signup%2Fsrc%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=%2FUsers%2Fmatheus.rocha%2FDeveloper%2Fatlantic-signup&isDev=true&tsconfigPath=tsconfig.json&basePath=&assetPrefix=&nextConfigOutput=standalone&preferredRegion=&middlewareConfig=e30%3D! (/Users/matheus.rocha/Developer/atlantic-signup/.next/server/app/api/deal/route.js:369:1)
    at __webpack_require__ (/Users/matheus.rocha/Developer/atlantic-signup/.next/server/webpack-runtime.js:33:43)
    at __webpack_exec__ (/Users/matheus.rocha/Developer/atlantic-signup/.next/server/app/api/deal/route.js:500:39)
    at /Users/matheus.rocha/Developer/atlantic-signup/.next/server/app/api/deal/route.js:501:1894
    at __webpack_require__.X (/Users/matheus.rocha/Developer/atlantic-signup/.next/server/webpack-runtime.js:163:21)
    at /Users/matheus.rocha/Developer/atlantic-signup/.next/server/app/api/deal/route.js:501:47
    at Object.<anonymous> (/Users/matheus.rocha/Developer/atlantic-signup/.next/server/app/api/deal/route.js:504:3)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at mod.require (/Users/matheus.rocha/Developer/atlantic-signup/node_modules/next/dist/server/require-hook.js:64:28)
    at require (node:internal/modules/cjs/helpers:119:18)
    at requirePage (/Users/matheus.rocha/Developer/atlantic-signup/node_modules/next/dist/server/require.js:109:84)
    at /Users/matheus.rocha/Developer/atlantic-signup/node_modules/next/dist/server/load-components.js:59:84
    at async loadComponentsImpl (/Users/matheus.rocha/Developer/atlantic-signup/node_modules/next/dist/server/load-components.js:59:26)
    at async DevServer.findPageComponentsImpl (/Users/matheus.rocha/Developer/atlantic-signup/node_modules/next/dist/server/next-server.js:666:36) {
  page: '/api/deal'
}

Anybody already passed through this?

[youssef-saber-3]

Hey , what version of the package and node are you using ?

[matheusrocha89]

I am using the: 22.6.1 version of pipedrive client and node version 18.18.0

[siirimangus]

Hey, @matheusrocha89!

Maybe you can share a bit more insights about your project's setup?

I created a simple nextjs project based on the tutorial and I was able to use the SDK v22.6.1 with Node 18.18.0, I didn't bump into the issue that you are having.

[matheusrocha89]

Hi @siirimangus I create a new repository and tried to use and got the same error. Here is the repository link
https://github.com/matheusrocha89/pipedrive-example

[rphm]

The error is related to the Formidable package which is inherited by the superagent package.

I'm using the same versions as @matheusrocha89:

 "next": "14.2.3",
 "pipedrive": "^22.8.0",

References:
auth0/node-auth0#798
pubnub/javascript#352

I adapted the solution from the last link and the error disappeared:

next.config.mjs

import path from 'path';
/** @type {import('next').NextConfig} */
const nextConfig = {
    webpack: (config, { isServer }) => {
        config.resolve.alias['hexoid'] = path.resolve('node_modules/hexoid/dist/index.js');
        return config;
      }
};

export default nextConfig;

[siirimangus]

@rphm , thank you so much for the insights!

I tried this solution on the provided project https://github.com/matheusrocha89/pipedrive-example and it worked, the error disappeared.

One thing, though, I wasn't able to use the import statement for pipedrive package, had to use require. Is it the same for you as well @matheusrocha89?

Another thing I'm going to try out now is, to bump the superagent version to 9 in the pipedrive package in order to see whether it will resolve the issue with formidable as well. As the issue seems to be with superagent 7, but not, for example, with superagent 6 as suggested in this comment: auth0/node-auth0#798 (comment)

[matheusrocha89]

@siirimangus I could make it work using

import * as pipedrive from "pipedrive";

I had to do that because there was no export default so I imported everything and named it as pipedrive doing that.

Off-topic question:
Do we have support for typescript types or it's in the roadmap to be created? Because I had to declare a module in this example so typescript not complain about not having type definitions for the lib.

[matheusrocha89]

@rphm in your solution you are destructing the { isServer } but you are not using it, you were planning to use it and didn't write or you just forgot the variable there? Just wanna understand if you would use it to change the resolve alias if it was server-side.

[rphm]

sorry, forgot to remove that, has nothing to do with the solution:

next.config.mjs

import path from 'path';

/** @type {import('next').NextConfig} */
const nextConfig = {
    webpack: (config) => {
        config.resolve.alias['hexoid'] = path.resolve('node_modules/hexoid/dist/index.js');
        return config;
      }
};

export default nextConfig;

[siirimangus]

Off-topic question: Do we have support for typescript types or it's in the roadmap to be created? Because I had to declare a module in this example so typescript not complain about not having type definitions for the lib.

Typescript support is in the roadmap. Currently it is in the rc status: https://www.npmjs.com/package/pipedrive/v/22.3.1-rc.5

[siirimangus]

Another thing I'm going to try out now is, to bump the superagent version to 9 in the pipedrive package in order to see whether it will resolve the issue with formidable as well. As the issue seems to be with superagent 7, but not, for example, with superagent 6 as suggested in this comment: auth0/node-auth0#798 (comment)

Sadly the same issue persists with superagent v9 which uses formidable v3.

So I guess the suggested solution is the way to go here.