"Build failed because of webpack errors" when using client code in NextJS React-App

[DavidHaintz]

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

Framework Version

Next.js 15.0.1

Link to Sentry event

No response

Reproduction Example/SDK Setup

No response

Steps to Reproduce

Create a new React-App with NextJS:
npx create-next-app@latest

√ Would you like to use TypeScript? ... Yes
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... Yes
√ Would you like your code inside a `src/` directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to use Turbopack for next dev? ... No
√ Would you like to customize the import alias (@/* by default)? ... No

Add following code on the top of layout.tsx and page.tsx:

'use client'

This is the step that causes the error, but I need everything to be client only.

Now you can set up sentry as described in the documentation. I tried the wizard, as well as this: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/

npx @sentry/wizard@latest -i nextjs
(I said no to proxiing the requests).

Expected Result

No error when building.

Actual Result

It uploads the sourcemaps, but exits with following error log:

   Creating an optimized production build ...
Failed to compile.

./node_modules/@opentelemetry/instrumentation-amqplib/build/src/index.js
Self-reference dependency has unused export name: This should not happen

Import trace for requested module:
./node_modules/@opentelemetry/instrumentation-amqplib/build/src/index.js
./node_modules/@sentry/node/build/cjs/integrations/tracing/amqplib.js
./node_modules/@sentry/node/build/cjs/index.js
./node_modules/@sentry/nextjs/build/cjs/index.server.js
./src/app/page.tsx

./node_modules/@opentelemetry/instrumentation-amqplib/build/src/types.js
Self-reference dependency has unused export name: This should not happen

Import trace for requested module:
./node_modules/@opentelemetry/instrumentation-amqplib/build/src/types.js
./node_modules/@opentelemetry/instrumentation-amqplib/build/src/index.js
./node_modules/@sentry/node/build/cjs/integrations/tracing/amqplib.js
./node_modules/@sentry/node/build/cjs/index.js
./node_modules/@sentry/nextjs/build/cjs/index.server.js
./src/app/page.tsx

./node_modules/@opentelemetry/instrumentation-connect/build/src/enums/AttributeNames.js
Self-reference dependency has unused export name: This should not happen

Import trace for requested module:
./node_modules/@opentelemetry/instrumentation-connect/build/src/enums/AttributeNames.js
./node_modules/@opentelemetry/instrumentation-connect/build/src/index.js
./node_modules/@sentry/node/build/cjs/integrations/tracing/connect.js
./node_modules/@sentry/node/build/cjs/index.js
./node_modules/@sentry/nextjs/build/cjs/index.server.js
./src/app/page.tsx

./node_modules/@opentelemetry/instrumentation-connect/build/src/index.js
Self-reference dependency has unused export name: This should not happen

Import trace for requested module:
./node_modules/@opentelemetry/instrumentation-connect/build/src/index.js
./node_modules/@sentry/node/build/cjs/integrations/tracing/connect.js
./node_modules/@sentry/node/build/cjs/index.js
./node_modules/@sentry/nextjs/build/cjs/index.server.js
./src/app/page.tsx

./node_modules/@opentelemetry/instrumentation-dataloader/build/src/index.js
Self-reference dependency has unused export name: This should not happen

Import trace for requested module:
./node_modules/@opentelemetry/instrumentation-dataloader/build/src/index.js
./node_modules/@sentry/node/build/cjs/integrations/tracing/dataloader.js
./node_modules/@sentry/node/build/cjs/index.js
./node_modules/@sentry/nextjs/build/cjs/index.server.js
./src/app/page.tsx


> Build failed because of webpack errors

[DavidHaintz]

I found how to fix it.
layout.tsx may not be client-side. If you need client-side code in your layout, move it into a seperate component (which you can mark as client) and wrap it inside layout.tsx.

Now everything works.