Next.js Discord

Discord Forum

Edge Runtime throwing errors about NodeJS APIs being used

Unanswered
Chalcid wasp posted this in #help-forum
Open in Discord
Chalcid waspOP
Hey guys, I recently moved all my pages to run on the Edge runtime so my website runs on multi zone, but after that I started getting this error:

A Node.js API is used (MessageChannel) which is not supported in the Edge Runtime

The problem is that on my application, I'm not using any NodeJS API at all, and the stack trace suggests this is coming from something related to Apollo Client. This is the logs that I have when running local:

https://pastebin.com/HiktPnmF

But on production in other hand I get a different error:

https://pastebin.com/hCYqvk3S

But because of both logs shows stuff related to apollo, I went and opened an issue in their repository, but one of the maintainers said this is likely an issue with my bundling or with nextjs and not apollo and that I should ask here:

https://github.com/apollographql/apollo-client-integrations/issues/511

This error is not causing any bugs on my application, but it's just very annoying, it's flooding my logs. So I really wanna know how can I find the exact package that is causing this and fix it?

In case it's needed, this is my next.config.ts:

import { withSentryConfig } from "@sentry/nextjs";
import type { NextConfig } from "next";
import path from "path";

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        hostname: "*",
        port: "3000",
      },
      {
        hostname: "*",
      },
    ],
  },
  experimental: {
    optimizePackageImports: ["lucide-react", "@apollo/client"],
  },
  compress: true,
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      "@": path.resolve(__dirname, "src"),
    };

    return config;
  },
};

export default withSentryConfig(nextConfig, {
  // For all available options, see:
  // https://www.npmjs.com/package/@sentry/webpack-plugin#options

  org: "prevera",
  project: "prevera-web",

  // Only print logs for uploading source maps in CI
  silent: !process.env.CI,

  // For all available options, see:
  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/

  // Upload a larger set of source maps for prettier stack traces (increases build time)
  widenClientFileUpload: true,

  // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
  // This can increase your server load as well as your hosting bill.
  // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
  // side errors will fail.
  tunnelRoute:
    process.env.NODE_ENV === "production" ? "/monitoring" : undefined,

  // Automatically tree-shake Sentry logger statements to reduce bundle size
  disableLogger: true,

  // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
  // See the following for more information:
  // https://docs.sentry.io/product/crons/
  // https://vercel.com/docs/cron-jobs
  automaticVercelMonitors: true,
});

0 Replies