Next.js 13 with app router: "require function is used in a way in which dependencies cannot be statically extracted"

[subvertallchris]

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

7.71.0

Framework Version

Next.js 13.5.3-canary.3

Link to Sentry event

No response

SDK Setup

Sentry.init({
  dsn:  REDACTED,

  // Adjust this value in production, or use tracesSampler for greater control
  tracesSampleRate: 1,

  // Setting this option to true will print useful information to the console while you're setting up Sentry.
  debug: false,

  replaysOnErrorSampleRate: 1.0,

  // This sets the sample rate to be 10%. You may want this to be 100% while
  // in development and sample at a lower rate in production
  replaysSessionSampleRate: 0.1,

  // You can remove this option if you're not planning to use the Sentry Session Replay feature:
  integrations: [
    new Sentry.Replay({
      // Additional Replay configuration goes in here, for example:
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],
});

Steps to Reproduce

1. Add import * as Sentry from '@sentry/nextjs'; to a file
2. Import this file from a client component

Expected Result

The code should be imported with no side-effects in the log.

Actual Result

With lib/reportError.ts defined as such:

import * as Sentry from '@sentry/nextjs';

export function reportError(e: Error, params?: object) {
  Sentry.captureException(e, params);
}

Importing it results in the following appearing every time in my dev console.

./node_modules/@sentry/nextjs/cjs/config/webpack.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
./node_modules/@sentry/nextjs/cjs/config/webpack.js
./node_modules/@sentry/nextjs/cjs/config/withSentryConfig.js
./node_modules/@sentry/nextjs/cjs/index.server.js
./lib/reportError.ts
./component/that/was/imported/First.tsx

[gusfune]

Can confirm, this only happens in 7.71.0+
Reverting back to 7.70.0 fixes the problem.

[James-Lam]

Same log:

Import trace for requested module:
./node_modules/@sentry/nextjs/cjs/config/webpack.js
./node_modules/@sentry/nextjs/cjs/config/withSentryConfig.js
./node_modules/@sentry/nextjs/cjs/index.server.js
./components/features/SentryUserManager.tsx
 ⚠ ./node_modules/@sentry/nextjs/cjs/config/webpack.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

next.js: 13.5.3
@sentry/nextjs: 7.72.0

[lforst]

I can see how that is happening. I don't think this warning has any critical impact as of now.

[alvarlagerlof]

Is there a way to silence this warning?

[subvertallchris]

While it may not have a critical impact it does hurt the developer experience and discourage folks from upgrading. I would really love someone’s thoughts on when this will be addressed.

[lforst]

Is there a way to silence this warning?

@alvarlagerlof Since this is webpack emitting the warning, probably, but not from within the SDK.

While it may not have a critical impact it does hurt the developer experience and discourage folks from upgrading. I would really love someone’s thoughts on when this will be addressed.

@subvertallchris I can't say. 1 week? 2 weeks? You could turn off the SDK in dev mode if your developer experience is massively impacted.

[wroughtec]

@sentry

I have done the following to ignore the warning (hopefully an update will fix this entirely), ref - https://medium.com/tomincode/hiding-critical-dependency-warnings-from-webpack-c76ccdb1f6c1:
in next.config

webpack(config, { isServer, nextRuntime }) {
    if (isServer && nextRuntime === 'nodejs') {
      config.plugins.push(
        /**
         * hide warnings from @sentry/nextjs in development
         * https://github.com/getsentry/sentry-javascript/issues/9120
         */
        new webpack.ContextReplacementPlugin(/\/@sentry\//, (data) => {
          // eslint-disable-next-line no-param-reassign
          delete data.dependencies[0]?.critical;
          return data;
        }),
      );
    }

    return config;
  },

[lforst]

Hi everybody, we just released version 7.74.1 of the SDK which includes a fix for this issue. Please try it out and let us know here if the issue persists!

[mo-rally-dev]

I just tried it out and it's working great! Thanks for the fix.