NextJS and lazy-loading replay warning top level await

[sergio-milu]

Is there an existing issue for this?

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

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/nextjs

SDK Version

8.3.0

Framework Version

NextJS 14.2.3

Link to Sentry event

No response

SDK Setup

/* sentry.client.config.js */
// This file configures the initialization of Sentry on the client.
// The config you add here will be used whenever a users loads a page in their browser.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/

import { init, addIntegration } from '@sentry/nextjs';

init({
dsn: process.env.NEXT_PUBLIC_SENTRY_WEBAPP_DSN ?? undefined,
environment: process.env.NEXT_PUBLIC_ENVIRONMENT ?? undefined,
tracesSampleRate: 1,
debug: false,
replaysOnErrorSampleRate: 1.0,
replaysSessionSampleRate: 0.1,

initialScope: {
tags: {
version: process.env.NEXT_PUBLIC_PACKAGE_VERSION ?? undefined,
},
},
ignoreTransactions: ['/ping'],
tracePropagationTargets: ['localhost', /^/(?!/)/],
integrations: [],
});

const { replayIntegration } = await import('@sentry/nextjs');
addIntegration(replayIntegration());

Steps to Reproduce

Having the sentry.client.config.js as stated in this issue, start nextjs dev server and you'll see warning in console (both terminal and browser)

Expected Result

No warnings in console

Actual Result

 ⚠ ./sentry.client.config.js
The generated code contains 'async/await' because this module is using "topLevelAwait".
However, your target environment does not appear to support 'async/await'.
As a result, the code may not run as expected or may cause runtime errors.

[s1gr1d]

This could be an issue with the webpack configuration. How does your webpack config in next.config.js look like? Or are you using Turbopack?

[sergio-milu]

This could be an issue with the webpack configuration. How does your webpack config in next.config.js look like? Or are you using Turbopack?

nop, i'm not using turbopack, this is my config

  logging: {
    fetches: {
      fullUrl: true,
    },
  },
  nx: {
    // https://github.com/gregberge/svgr
    svgr: false,
  },

  redirects: async () => [getUrlShortenerRedirect()].filter(Boolean),

  i18n: {
    locales: ['en'],
    defaultLocale: 'en',
  },

  images: {
    minimumCacheTTL: 60 * 60 * 24 * 30, // 1 month
  },

  experimental: {
    instrumentationHook: true,
  },

  webpack(config) {
    const fileLoaderRule = config.module.rules.find((rule) =>
      rule.test?.test?.('.svg')
    );

    config.module.rules.push(
      {
        ...fileLoaderRule,
        test: /\.svg$/i,
        resourceQuery: /url/, // *.svg?url
      },
      // Convert all other *.svg imports to React components
      {
        test: /\.svg$/i,
        issuer: fileLoaderRule.issuer,
        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
        use: ['@svgr/webpack'],
      }
    );

    fileLoaderRule.exclude = /\.svg$/i;

    return config;
  },
};

async function withCustom(phase) {
  const nxConfig = withNx(nextConfig);
  const config = await nxConfig(phase);

  return withBundleAnalyzer(withSentryConfig(config, sentryConfig));
}

[s1gr1d]

Thanks for adding the snippet!

There is an issue in the Next.js repo where people discuss this topic. You may have success by adding the topLevelAwait experiment to the webpack options and setting the target: "ES2017" in your tsconfig.json.

const nextConfig = {
  // other config stuff

  webpack(config) {
    config.experiments = { ...config.experiments, topLevelAwait: true }
    return config
  },
};

Another solution would be to just simply not use the top-level-await. Create a function and immediately call it:

async function loadReplay() {
  const { replayIntegration } = await import('@sentry/nextjs');
  Sentry.addIntegration(replayIntegration());
}

loadReplay();

or as an IIFE

(async () => {
  const { replayIntegration } = await import('@sentry/nextjs');
  Sentry.addIntegration(replayIntegration());
})();

Does this fix the issue for you?

And thanks for pointing this out! I will add a snippet to our docs!

[s1gr1d]

However, if you do not need the lazy import, you can always add the integration in Sentry.init like shown in the docs.