Error [ERR_REQUIRE_ESM] Build error in Next Config @sentry/nextjs

[WebAiz]

Is there an existing issue for this?

• [x] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• [x] I have reviewed the documentation https://docs.sentry.io/
• [x] I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Self-hosted/on-premise

Which SDK are you using?

@sentry/nextjs

SDK Version

^8.17.0

Framework Version

Next 14.1.0

Link to Sentry event

No response

Reproduction Example/SDK Setup

import { withSentryConfig } from "@sentry/nextjs";

// next.config.mjs
/** @type {import('next').NextConfig} */

const nextConfig = {
  basePath: "/notification-center",
  i18n: {
    locales: ["ru", "kz", "en"],
    defaultLocale: "kz",
    localeDetection: false,
  },
  async headers() {
    return [
      {
        // Append the "Service-Worker-Allowed" header
        // to each response, overriding the default worker's scope.
        source: "/(.*)",
        headers: [
          {
            key: "Service-Worker-Allowed",
            value: "/",
          },
          { key: "Access-Control-Allow-Origin", value: "*" }, // replace this your actual origin
        ],
      },
    ];
  },
  optimizeFonts: false,
};

export default withSentryConfig(nextConfig, {
  // For all available options, see:
  // https://github.com/getsentry/sentry-webpack-plugin#options

  org: "sentry",
  project: process.env.NEXT_PUBLIC_SENTRY_PROJECT,
  url: process.env.NEXT_PUBLIC_PROJECT_HOST,

  // 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,

  // Transpiles SDK to be compatible with IE11 (increases bundle size)
  transpileClientSDK: true,

  // Uncomment to 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: "/monitoring",

  // Hides source maps from generated client bundles
  hideSourceMaps: true,

  // 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,

  // An auth token is required for uploading source maps.
  authToken: process.env.NEXT_PUBLIC_SENTRY_AUTH_TOKEN,
});

Steps to Reproduce

Our project built when using version ^8.17.0 however it started crashing in our pipelines. Locally the build is successfull

Expected Result

The build should work as before.

Actual Result

> next build 
⨯ Failed to load next.config.mjs, see more info here https://nextjs.org/docs/messages/next-config-error
> Build error occurred
Error [ERR_REQUIRE_ESM]: require() of ES Module /ansi-styles/index.js from /@sentry/nextjs/node_modules/chalk/source/index.js not supported.
Instead change the require of /ansi-styles/index.js in /@sentry/nextjs/node_modules/chalk/source/index.js to a dynamic import() which is available in all CommonJS modules.
    at mod.require (/next/dist/server/require-hook.js:65:28)
    at Object.<anonymous> (/@sentry/nextjs/node_modules/chalk/source/index.js:2:20)
    at mod.require (/next/dist/server/require-hook.js:65:28)
    at Object.<anonymous> (/@sentry/nextjs/build/cjs/config/webpack.js:12:15)
    at mod.require (/next/dist/server/require-hook.js:65:28)
    at Object.<anonymous> (/@sentry/nextjs/build/cjs/config/withSentryConfig.js:10:17)
    at mod.require (/next/dist/server/require-hook.js:65:28)
    at Object.<anonymous> (/@sentry/nextjs/build/cjs/index.server.js:3:26) {
  code: 'ERR_REQUIRE_ESM'
}

[Lms24]

Hey @WebAiz thanks for writing in!

Our project built when using version ^8.17.0 however it started crashing in our pipelines. Locally the build is successfull

If building it locally works, I recommend checking what you do differently in your pipelines where the build fails.

I'm a bit surprised that this is happening now, given we've been using chalk (which depends on ansi-styles) for years. I'm not saying that there's not a bug on our end, just wanna make sure it's not a build config problem first.

[getsantry[bot]]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you remove the label Waiting for: Community, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀