Sentry Nextjs causes dev server to recompile forever

[danqing]

@sentry/nextjs 6.14.0 causes the Next.js dev server to recompile infinitely. I'm on node 16.8 and nextjs 11.0.1.

Downgrading to @sentry/nextjs 6.13.3 fixes the infinite recompiling (without needing to downgrade other sentry packages).

[svict4]

Also experiencing the same recompile looping, nextjs@v11.1.2.
Downgrading to v6.13.3 also fixed for me.

[gish]

Same here, nextjs@v12.0.2

[MHase]

tested on next@10.0.8
downgrading to v6.13.3 fixed the issue 👌🏻

[willianrod]

Same here with nextjs@v10.2.0. Downgrading @sentry/nextjs to 6.13.3 fixes the problem

[sanderkooger]

Same issue here.

[AbhiPrasad]

Hey folks, thanks for writing in. Is it possible for anyone to provide a reproduction?

A copy of your next.config.js would be a big help as well.

[sanderkooger]

Hey folks, thanks for writing in. Is it possible for anyone to provide a reproduction?

A copy of your next.config.js would be a big help as well.

// next.config.js
/* eslint-disable no-console */
const withPlugins = require('next-compose-plugins');
const withPWA = require('next-pwa');
const { withSentryConfig } = require('@sentry/nextjs');
// eslint-disable-next-line import/no-extraneous-dependencies
const webpack = require('webpack');
const { getBuildId } = require('./src/util/getBuildId');

const nextConfig = {
  // include git commit as buildId
  generateBuildId: async () => {
    const gitBuildId = await getBuildId();
    console.log(`>[BUILD ID]: ${gitBuildId}`);
    return gitBuildId;
  },
  env: {
    HASURA_URL: process.env.HASURA_URL,
    TIF_IMAGE_CDN: process.env.TIF_IMAGE_CDN,
    FRONTEND_WEB_URL: process.env.FRONTEND_WEB_URL,
    MAINTENANCE_MODE: process.env.MAINTENANCE_MODE,
    TIF_STUDIO_URL: process.env.TIF_STUDIO_URL,
    BUILD_ID: process.env.BUILD_ID,
    SENTRY_RELEASE: process.env.BUILD_ID,
    NEXT_PUBLIC_SENTRY_DSN: process.env.NEXT_PUBLIC_SENTRY_DSN
  },
  i18n: {
    locales: ['en'],
    defaultLocale: 'en'
  },
  images: {
    domains: ['cdn.thisisfashion.tv', 'thisisfashion.tv', 'localhost'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384]
  },
  module: {
    rules: [{ test: /\.tsx?$/, loader: 'awesome-typescript-loader' }], // other loader configuration goes in the array
    resolve: {
      extensions: ['.js', '.jsx', '.react.js', '.ts', '.tsx'],
      alias: {
        '@mui/styled-engine': '@mui/styled-engine-sc'
      }
    }
  }
};

const SentryWebpackPluginOptions = {
  // Additional config options for the Sentry Webpack plugin. Keep in mind that
  // the following options are set automatically, and overriding them is not
  // recommended:
  //   release, url, org, project, authToken, configFile, stripPrefix,
  //   urlPrefix, include, ignore
  silent: true // Suppresses all logs
  // For all available options, see:
  // https://github.com/getsentry/sentry-webpack-plugin#options.
};

// eslint-disable-next-line no-console
console.log(`>[NODE_ENV]: ${process.env.NODE_ENV}`);

const moduleExports = withPlugins(
  [
    [
      withPWA({
        pwa: {
          dest: 'public',
          disable: process.env.NODE_ENV === 'development',
          // maximumFileSizeToCacheInBytes: 5000000,
          // mode: 'development', // enable verbose loggin in prod
          buildExcludes: [
            /chunks\/images\/.*$/, // Don't precache files under .next/static/chunks/images this improves next-optimized-images behaviour
            /chunks\/pages\/api\/.*/ // Dont cache the API it needs fresh serverinfo
          ],
          exclude: [
            /\.map$/, // dont cache map files
            /^.*ts.*$/, // Dont let serviceworker touch the TS streams
            /-manifest.json$/ // exclude those pesky json files in _next root but still serve the ones we need from /_next/static
          ],
          skipWaiting: true, // installs new SW when available withou a promt, we only need to send a reload request to user.
          dynamicStartUrl: false, // recommend: set to false if your start url always returns same HTML document, then start url will be precached, this will help to speed up first load.
          reloadOnOnline: false, // Prevents reloads on offline/online switch
          sourcemap: false
        },
        webpack: (config, { buildId }) => {
          config.plugins.push(
            new webpack.DefinePlugin({
              'process.env': {
                BUILD_ID: JSON.stringify(buildId)
              }
            })
          );
          // eslint-disable-next-line no-param-reassign
          config.experiments = {
            layers: true,
            topLevelAwait: true
          };
          return config;
        }
      })
    ]
  ],
  process.env.MAINTENANCE_MODE === 'true'
    ? {
        async redirects() {
          return [
            {
              source: '/((?!maintenance).*)',
              destination: '/maintenance.html',
              permanent: false
            }
          ].filter(Boolean);
        }
      }
    : nextConfig
);

module.exports = withSentryConfig(moduleExports, SentryWebpackPluginOptions);

[jonahallibone]

Another examples

const withPlugins = require("next-compose-plugins");
const { withSentryConfig } = require("@sentry/nextjs");
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

const isProd = process.env.NODE_ENV === "production";

const nextConfig = {
  images: {
    domains: [
      "***",
    ],
  },
  experimental: {
    esmExternals: false,
  },
  env: {
    SENDGRID_API_KEY: process.env.SENDGRID_API_KEY,
    NEXT_PUBLIC_STRIPE_KEY: process.env.NEXT_PUBLIC_STRIPE_KEY,
    STRIPE_SECRET_KEY: process.env.STRIPE_SECRET_KEY,
    APP_ENV: process.env.APP_ENV,
    NEXT_PUBLIC_CONTENTFUL_SPACE_ID:
      process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID,
    NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN:
      process.env.NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN,
    NEXT_PUBLIC_CONTENTFUL_ENVIRONMENT:
      process.env.NEXT_PUBLIC_CONTENTFUL_ENVIRONMENT,
    NEXT_PUBLIC_DOMAIN: process.env.NEXT_PUBLIC_DOMAIN,
    NEXT_PUBLIC_HEAP_ID: process.env.NEXT_PUBLIC_HEAP_ID,
  },
  assetPrefix: isProd ? process.env.NEXT_PUBLIC_DOMAIN : "",
  async redirects() {
    return [
      {
        source: "/dashboard",
        destination: "/",
        permanent: true,
      },
      {
        source: "/login",
        destination: "/signin",
        permanent: true,
      },
      {
        source: "/auth/academic-sign-up",
        destination: "/academic-signup",
        permanent: true,
      },
      {
        source: "/auth/login",
        destination: "/signin",
        permanent: true,
      },
      {
        source: "/academic",
        destination: "/signin",
        permanent: true,
      },
      {
        source: "/academic-access",
        destination: "/signin",
        permanent: true,
      },
      {
        source: "/academic-access-login",
        destination: "/signin",
        permanent: true,
      },
      {
        source: "/academic-register",
        destination: "/signin",
        permanent: true,
      },
      {
        source: "/academic-access-login",
        destination: "/signin",
        permanent: true,
      },
      {
        source: "/auth/verify-academic-sign-up",
        destination: "/verify-academic-sign-up",
        permanent: true,
      },
      { source: "/auth/:path*", destination: "/:path*", permanent: true },
    ];
  },
};

const SentryWebpackPluginOptions = {
  // Additional config options for the Sentry Webpack plugin. Keep in mind that
  // the following options are set automatically, and overriding them is not
  // recommended:
  //   release, url, org, project, authToken, configFile, stripPrefix,
  //   urlPrefix, include, ignore
  // For all available options, see:
  // https://github.com/getsentry/sentry-webpack-plugin#options.
};

// Make sure adding Sentry options is the last code to run before exporting, to
// ensure that your source maps include changes from all other Webpack plugins

module.exports = withPlugins(
  [[withBundleAnalyzer], [withSentryConfig, SentryWebpackPluginOptions]],
  nextConfig
);

[Joelgullander]

Same issue here:

const { withSentryConfig } = require('@sentry/nextjs')
const withImages = require('next-images')
const { i18n } = require('./next-i18next.config')
const { BGD_ENV } = process.env

const basePath = '/checkout'

const SentryWebpackPluginOptions = {
  // Additional config options for the Sentry Webpack plugin. Keep in mind that
  // the following options are set automatically, and overriding them is not
  // recommended:
  // urlPrefix: `~${basePath}/_next`,
  //   release, url, org, project, authToken, configFile, stripPrefix,
  //   urlPrefix, include, ignore
  // For all available options, see:
  // https://github.com/getsentry/sentry-webpack-plugin#options.
}

const moduleExports = withImages({
  i18n,
  experimental: { esmExternals: true },
  crossOrigin: 'anonymous',
  images: {
    disableStaticImages: true,
    domains: ['citygross.se']
  },
  env: {
    BGD_ENV
  },
  basePath

  // Make sure adding Sentry options is the last code to run before exporting, to
  // ensure that your source maps include changes from all other Webpack plugins
})

module.exports = withSentryConfig(moduleExports, SentryWebpackPluginOptions)

[adikari]

Upgrading to latest sentry caused it for me too. Downgrading fixes it.

[lobsterkatie]

Sorry, everyone! Should be fixed in #4123.

[AbhiPrasad]

Fix released as part of https://www.npmjs.com/package/@sentry/nextjs/v/6.14.1, please let us know if there are any other problems!

[ulysset]

It works thanks :)

[MAfzalKhan1997]

facing the same on "@sentry/nextjs": "6.14.0" trying to resolve the issue from yesterday but no luck, upgrading to 6.14.1 resolved the issue. ❤

[jonioni]

Great fix! Was also suffering from the very same problem in our Next.js project for long, only to find the root cause here (missing dev)!

#4123 should be referenced by anyone who is also doing webpack isServer check within their next.config.js.

Kudos to @lobsterkatie 👍 !