Next.js Class extends value undefined is not a constructor or null on v7.89.0

[cpotey]

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.89.0

Framework Version

7.89.0

Link to Sentry event

https://the-key.sentry.io/issues/4917806857/?project=4506501905252352&query=is%3Aunresolved&referrer=issue-stream&statsPeriod=14d&stream_index=0

SDK Setup

if (process.env.NODE_ENV === 'production') {
  nextConfig = withSentryConfig(
    nextConfig,
    {
      // For all available options, see:
      // https://github.com/getsentry/sentry-webpack-plugin#options

      // Suppresses source map uploading logs during build
      silent: true,
      org: 'my-org',
      project: 'my-app-nextjs',
    },
    {
      // 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,

      // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
      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.
      // See the following for more information:
      // https://docs.sentry.io/product/crons/
      // https://vercel.com/docs/cron-jobs
      automaticVercelMonitors: false,
    }
  );
}

Steps to Reproduce

In my Next v14.1.0 app, I loaded a page, when a component seems to change inside the page, it caused an error from Sentry:

Class extends value undefined is not a constructor or null
This might be caused by a React Class Component being rendered in a Server Component, React Class Components only works in Client Components. Read more: https://nextjs.org/docs/messages/class-component-in-server-component

I have worked out the code that is the problem is within a server-only function which is loaded on every page to fetch user data from my API, this function is also where I am setting the user for Sentry.

import 'server-only';

import { cache } from 'react';
import { cookies } from 'next/headers';
import * as Sentry from '@sentry/nextjs';

/**
 * Fetch user's data
 * @returns {User | null}
 */
export const fetchUser = cache(async (): Promise<User | null> => {
  const res = await fetch(`${API_ENDPOINT}/keyusers/?current=True`, {
    headers: {
      Cookie: `sessionid=${cookies().get('sessionid')?.value}`,
      'Content-Type': 'application/json',
    },
  });
  
  if (!res.ok) {
    return null;
  }
  
  const data = await res.json();
  Sentry.setUser({ id: data.results[0].id });

  return data.results[0];
});

If I comment the Sentry parts out, everything works as expected.

This error doesn't occur on v7.88.0 of @sentry/nextjs, so am stuck on this version for now. I use this function in several places within my monorepo, so am unable to upgrade Sentry until I can find a solution here.

Expected Result

No errors in the console to occur

Actual Result

[voskobovich]

The same problem. I spent a few hours, and I didn't understand what happened.

@sentry/[email protected]
[email protected]
[email protected]

My first app uses Static Side Rendering (output: 'export'), and the second app uses Server Side Rendering.

In the error log I see the reference to the sentry.server.config.ts file and layout.tsx.

pages:dev:     at (rsc)/../../packages/sentry-config/src/sentry.server.config.ts (/app/apps/pages/.next/server/app/page.js:601:1)
pages:dev:     at __webpack_require__ (/app/apps/pages/.next/server/webpack-runtime.js:33:42)
pages:dev:     at eval (webpack-internal:///(rsc)/./sentry.server.config.ts:2:98)
pages:dev:     at (rsc)/./sentry.server.config.ts (/app/apps/pages/.next/server/app/page.js:590:1)
pages:dev:     at __webpack_require__ (/app/apps/pages/.next/server/webpack-runtime.js:33:42)
pages:dev:     at eval (webpack-internal:///(rsc)/./src/app/layout.tsx:9:82)

[lforst]

Hi, which Next.js version are you on?

[lforst]

Also, would anybody be able to share a minimal reproduction example that runs into this? Thank you!

[alvis]

I'm on next js 14.1 and I have the same error when I perform a server action. It does seem to me Next using the cjs version of @sentry/react is the cause of the error as I find the following in the log

⨯ ../packages/next/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sentry/react/cjs/profiler.js (34:40) @ Component
 ⨯ Class extends value undefined is not a constructor or null

This might be caused by a React Class Component being rendered in a Server Component, React Class Components only works in Client Components. Read more: https://nextjs.org/docs/messages/class-component-in-server-component

[lforst]

Hm, @alvis would you be able to provide a small reproduction repository?

[osdiab]

@cpotey My company is experiencing the same issue but using a simplified version of the code you provided in a simple repro project doesn't cause it, so I think there might be more to cause it to occur. Not sure exactly what the offending pattern is in our codebase.

[DenisBessa]

I'm experiencing this error as well. It happens in Next.js 14, only in dev mode, when some server action is triggered.

[voskobovich]

I have upgraded my project deps to the latest versions, and this problem has been resolved.
Now I can't reproduce this(

"@sentry/nextjs": "^7.102.1",
"next": "^14.1.0",

[lforst]

@DenisBessa would you mind giving a few more details? We have E2E tests covering server actions and they are not running into this.

[lforst]

I just realized the severity of this. Sorry for the inconvenience. I originally underestimated the impact. We will fix this asap.

[alvis]

Alternatively, I figured out the configuration below saves my days too. Seems like by forcing next to analyze barrel files, it ignores a problematic file down the route. @lforst hope it may help

{
  experimental: {
    optimizePackageImports: [
      '@sentry/core',
      '@sentry/nextjs',
      '@sentry/react'
    ]
  }
}

[lforst]

Hi everybody, we just released version 7.106.1 of the SDK which should address this issue. Please try it out and feel free to let us know if the fix worked (or not). Cheers!

[avarayr]

Hi everybody, we just released version 7.106.1 of the SDK which should address this issue. Please try it out and feel free to let us know if the fix worked (or not). Cheers!

Thanks @lforst, Can confirm 7.106.1 works without problems on Next.js 14.1.3 without applying the fix in this thread.

Also, do you happen to know if it's a good idea to just leave '@sentry/nextjs', '@sentry/node' in next external packages config?

Next.js team seems to have removed it to avoid a 350ms delay on cold boot, but I'm not sure if this is worth having the package broken again in the future.

[lforst]

@avarayr Thank you very much for confirming!

I highly recommend not putting @sentry/nextjs and @sentry/node in the external packages config. It has a non-trivial effect on cold-starts and may break certain SDK features in the future. We actually made an effort in collaboration with Vercel to remove the SDK from being external by default in Next.js: vercel/next.js#61194

It is really important for us moving forward because this was necessary for us to have directives like "use client" in the SDK.

[nbolton]

experimental: {
  serverComponentsExternalPackages: ['@sentry/nextjs', '@sentry/node'],
}

I can confirm this workaround fixed it. I almost stopped reading at this point but decided to check the latest comments and saw that the correct fix is actually:

npm install @sentry/nextjs@latest

@lforst Thanks to the Sentry team for fixing this.

[lforst]

@nbolton right. Thanks for the heads up!

@meienberger Thanks again for providing the workaround. I edited your comment to point people towards upgrading the SDK. I hope that's ok!

[RisingGeek]

I'm using @sentry/nextjs v8.17.0 and I see this issue sometimes in dev mode.

[lforst]

@RisingGeek if you can attribute this to the SDK and if you could provide a reproduction example that would be amazing. (if so, please do it in a new isse) Thanks!

[RisingGeek]

It's hard to reproduce as it is not happening always. But, this is the error that I'm getting

[lforst]

I think we need a reproduction example we can check out locally to properly troubleshoot this.

[RisingGeek]

Nevermin, this was an environment issue, I had NODE_PATH in environment, removing that from .env worked

[RichEwin]

experimental: {
serverComponentsExternalPackages: ['@sentry/nextjs', '@sentry/node'],
}

This also fixed the below error I encountered.

 An error occurred while loading instrumentation hook: Class extends value undefined is not a constructor or null

[kogovsekm]

We are also getting this error after adding the "--turbo" command to our dev builds.

    "@sentry/nextjs": "8.28.0",
    "next": "14.2.7"

When we spin up the local dev server we get the same error:

Class extends value undefined is not a constructor or null. his might be caused by a React Class Component being rendered in a Server Component, React Class Components only works in Client Components.

at [project]/node_modules/@sentry/react/build/esm/errorboundary.js [app-rsc] (ecmascript)

Hope this helps in any way.

[patik]

I got this error when I added an error boundary to a server component. The package I'm using must be a client component.

[ugniusramanauskas]

Same here. I got this error when I used <Sentry.ErrorBoundary> and did not annotate my file with "use client";

[lforst]

Reopening. It seems like we should add a use client directive in our client entrypoint at least.