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

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

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

@sentry/nextjs@7.95.0
next@14.1.0
react@18.2.0

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)

Hi, which Next.js version are you on?

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

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/@sentry+react@7.99.0_react@18.2.0/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

@alvis

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

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

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.

fix webpack bug getsentry/sentry-javascript#10366

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

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

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

feat(nextjs): Add `use client` directive to client SDK entrypoints (#…

A PR closing this issue has just been released 🚀

This issue was referenced by PR #15575, which was included in the 9.4.0 release.

Fixed errors triggered by server actions due to latest updates

Navigation Menu

Repository navigation

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

Is there an existing issue for this?

How do you use Sentry?

Which SDK are you using?

SDK Version

Framework Version

Link to Sentry event

SDK Setup

Steps to Reproduce

Expected Result

Actual Result

51 remaining items

A PR closing this issue has just been released 🚀

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

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

Description

Is there an existing issue for this?

How do you use Sentry?

Which SDK are you using?

SDK Version

Framework Version

Link to Sentry event

SDK Setup

Steps to Reproduce

Expected Result

Actual Result

Activity

voskobovich commented on Jan 28, 2024

lforst commented on Jan 29, 2024

lforst commented on Jan 29, 2024

alvis commented on Feb 6, 2024

lforst commented on Feb 7, 2024

51 remaining items

RichEwin commented on Aug 23, 2024

kogovsekm commented on Sep 5, 2024

patik commented on Dec 17, 2024

ugniusramanauskas commented on Jan 6, 2025

lforst commented on Jan 7, 2025

github-actions commented on Mar 5, 2025

A PR closing this issue has just been released 🚀

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions