Critical Dependency Warning After Upgrading to @sentry/nextjs v8

[saraluk]

Critical Dependency Warning After Upgrading to @sentry/nextjs v8

[cyrus-za]

I updated to @sentry/nextjs 8.9.2 and still getting this warning log

[gusfune]

I can also confirm this is going on 8.2.1 version.

[MarwanAlsoltany]

I can also confirm this is going on 8.2.1 version.

+1

[mydea]

Hmm, let's see if this: #12081 possibly fixes this 🤔

[lforst]

This warning can be safely ignored. In theory, the SDK should add an ignore rule for this warning. I wonder why that doesn't work for you 🤔

sentry-javascript/packages/nextjs/src/config/webpack.ts

Lines 662 to 669 in 7e59832

	function addOtelWarningIgnoreRule(newConfig: WebpackConfigObjectWithModuleRules): void {
	const ignoreRule = { module: /@opentelemetry\/instrumentation/ };
	if (newConfig.ignoreWarnings === undefined) {
	newConfig.ignoreWarnings = [ignoreRule];
	} else if (Array.isArray(newConfig.ignoreWarnings)) {
	newConfig.ignoreWarnings.push(ignoreRule);
	}
	}

Would you mind sharing your next.config.js? Can you try adding the following to your ignoreWarnings in your Next.js webpack config?

[
    { module: /@opentelemetry\/instrumentation/, message: /Critical dependency/ },
    { module: /@prisma\/instrumentation/, message: /Critical dependency/ },
]

[GiancarlosIO]

Hi there. I'm using @sentry/nextjs v8.7.0 and I still get the warning in the console:

- warn ../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@opentelemetry/instrumentation/build/src/platform/node/instrumentation.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@opentelemetry/instrumentation/build/src/platform/node/instrumentation.js
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@opentelemetry/instrumentation/build/src/platform/node/index.js
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@opentelemetry/instrumentation/build/src/platform/index.js
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@opentelemetry/instrumentation/build/src/index.js
../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@opentelemetr_easlgnajsmadvvyfptwg27pvmy/node_modules/@sentry/opentelemetry/cjs/index.js
../../node_modules/.pnpm/@[email protected]/node_modules/@sentry/node/cjs/index.js
../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@opentelemetry+api@1_n5hycvwuc2wadypxzgqutrwu2y/node_modules/@sentry/nextjs/cjs/index.server.js

Is the issue closed because the fix is going to be released in a new version? 🤔

[lforst]

@GiancarlosIO It's not really a fix we published but we are ignoring the warning automatically. The code for this is here:

sentry-javascript/packages/nextjs/src/config/webpack.ts

Line 663 in 7de5ea4

function addOtelWarningIgnoreRule(newConfig: WebpackConfigObjectWithModuleRules): void {

I struggle a bit to understand how this is happening. Would you mind sharing reproduction? Thanks!

[lforst]

@cyrus-za would you mind sharing more information? The import trace would be helpful.

[cyrus-za]

@cyrus-za would you mind sharing more information? The import trace would be helpful.

I setup my nextjs project with the instrumentation hook defined here

Using next 14.2.3, nx 19.2.2, pnpm 9.1.0 and node 20.14.0

I got a nx lib for my wrapper around sentry. Not sure if that makes a difference.

Everything worked just fine before the switch to v8

Critical dependency: the request of a dependency is an expression

Import trace for requested module:
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@opentelemetry/instrumentation/build/esm/platform/node/instrumentation.js
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@opentelemetry/instrumentation/build/esm/platform/node/index.js
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@opentelemetry/instrumentation/build/esm/platform/index.js
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@opentelemetry/instrumentation/build/esm/index.js
../../node_modules/.pnpm/@[email protected]/node_modules/@prisma/instrumentation/dist/chunk-B5GLSQ4E.js
../../node_modules/.pnpm/@[email protected]/node_modules/@prisma/instrumentation/dist/index.js
../../node_modules/.pnpm/@[email protected]/node_modules/@sentry/node/cjs/integrations/tracing/prisma.js
../../node_modules/.pnpm/@[email protected]/node_modules/@sentry/node/cjs/index.js
../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@opentelemetry+api@1_ujmyanxtchbaumo3rdotqhac5q/node_modules/@sentry/nextjs/cjs/index.server.js
../utils/sentry/src/lib/sentry.ts
../utils/sentry/src/index.ts
./src/app/layout.tsx

[lforst]

It might be nx that is messing with our ignoring of the warning.

@GiancarlosIO are you also using nx?

Please note: It is safe to ignore this warning. All it does, is say that webpack is unable to statically analyze an import. This may have some implications with regards to bundling server code but in 99.999% of the cases this should be fine.

[cyrus-za]

In case it helps, here's my nextjs config

/* eslint-disable  n/no-process-env */
import { composePlugins, withNx } from '@nx/next'
import { withSentryConfig } from '@sentry/nextjs'
import webpack from 'webpack'
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'

/** @type {import('@nx/next/plugins/with-nx').WithNxOptions} */

const config = {
  experimental: {
    instrumentationHook: true,
  },
  typescript: {
    tsconfigPath: 'tsconfig.app.json',
    // `build` depends on `type-check` so we don't need to run `type-check` separately
    ignoreBuildErrors: true,
  },
  nx: {
    // Set this to true if you would like to use SVGR
    // See: https://github.com/gregberge/svgr
    svgr: false,
  },
  webpack(cfg, { isServer, nextRuntime }) {
    // eslint-disable-next-line no-param-reassign
    cfg.resolve.alias.canvas = false

    if (isServer && nextRuntime === 'nodejs') {
      cfg.plugins.push(new webpack.IgnorePlugin({ resourceRegExp: /@aws-sdk\/signature-v4-crt/ }))
    }

    return cfg
  },
  reactStrictMode: true,
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'lh3.googleusercontent.com',
        port: '',
        pathname: '/**/*',
      },
      {
        protocol: 'https',
        hostname: 's.gravatar.com',
        port: '',
        pathname: '/**/*',
      },
    ],
  },
  transpilePackages: ['jotai-devtools', 'react-pdf'],
}

const sentryConfig = {
  // 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: false,

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

  automaticVercelMonitors: true,

  // Suppresses source map uploading logs during build
  silent: true,
}

const plugins = [
  // Add more Next.js plugins to this list if needed.
  withNx,
]

/** @type {import('@nx/next/plugins/with-nx').WithNxOptions} */

const configWithSentry = process.env.VERCEL ? withSentryConfig(config, sentryConfig) : config

export default composePlugins(...plugins)(configWithSentry)

[matmannion]

I've managed to get this working by effectively duplicating the Sentry code for this myself in my Next config:

/** @type {import('next').NextConfig} */
const nextConfig = withSentryConfig(
  ...
  webpack(
    /** @type {import('webpack').WebpackOptionsNormalized} */ config,
    /** @type {import('next/dist/server/config-shared').WebpackConfigContext} */ context
  ) {
    config.ignoreWarnings = [
      ...(config.ignoreWarnings ?? []),
      (warning, { requestShortener }) => {
        const isOtelModule =
          !!warning.module &&
          (/@opentelemetry\/instrumentation/.test(warning.module.readableIdentifier(requestShortener)) ||
            /@prisma\/instrumentation/.test(warning.module.readableIdentifier(requestShortener)))

        const isCriticalDependencyMessage = /Critical dependency/.test(warning.message)

        return isOtelModule && isCriticalDependencyMessage
      },
    ]
  },
  ...
)

I'm not sure if the reason the Sentry code only catches one of the two errors is because it's only looking at the server context?