[Bug] Nextjs 14 and monday-sdk-js npm package = "TypeError: fetch is not a function"

[launchthatbrand]

Summary

I am working on an app for Monday.com api. It uses the "monday-sdk-js package".

I have it working fine on nextjs 13.4, but when I upgrade to Nextjs 14 I am getting this error. From what I can find there was something "node-fetch" related that was removed from Nextjs, potentionally causing this issue.

How can I go about making this package work? I assume by polyfilling node-fetch somehow but I am unclear on how to properly do this after searching.

The monday-sdk-js package has logic like:

import mondaySdk from "monday-sdk-js";
const monday = mondaySdk();
monday.setApiVersion("2023-10");

 const query = "query { boards (ids: 5798486455) { groups { title id }} }";
  const result = await monday.api(query, options);
  console.log("fetchCategories", result);

So in my component or server action I query the data, I never have direct access or actually write the fetch call. Inside the monday-sdk-js node_modules folder there is a file called "fetch.js" which has the fetch call and where the error is being thrown.

const fetch = require("node-fetch");

// for tests - to allow stubbing node-fetch with sinon
function nodeFetch(url, options = {}) {
  return fetch(url, options);
}

module.exports = {
  nodeFetch
};

How do i properly deal with this situation in NextJs 14?

Additional information

No response

Example

No response

[Sh1n]

Same here

[launchthatbrand]

Coming back to this, i believe I fixed with:

/**

• Run build or dev with SKIP_ENV_VALIDATION to skip env validation. This is especially useful
• for Docker builds. */ await import("./src/env.js");

/* @type {import("next").NextConfig} / const config = { experimental: { serverComponentsExternalPackages: ["monday-sdk-js"], }, images: { remotePatterns: [ { hostname: "static.thenounproject.com", }, { hostname: "files-monday-com.s3.amazonaws.com", }, { hostname: "fdotwww.blob.core.windows.net", }, ], }, };

export default config;

[pelykh]

Same problem. I fixed it with this:

//next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: ["monday-sdk-js"],
  },
};

export default nextConfig;