require() of ES Module @angular/core/fesm2022/core.mjs not supported

[zip-fa]

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/angular-ivy

SDK Version

7.75.1

Framework Version

17.0.0-rc.1

Link to Sentry event

No response

SDK Setup

No response

Steps to Reproduce

ng serve on esbuild-based builder in angular

Expected Result

Working angular project

Actual Result

Not working angular project :))

Logs, explanation: angular/angular-cli#26135

[Lms24]

Hi @zip-fa thank you for reporting! Haven't looked into Angular 17 yet but I'll try to reproduce this. Are you using some kind of SSR setup or does this happen out of the box?

[zip-fa]

@Lms24 here is the repro: https://github.com/zip-fa/ng17-sentry-bug

don't forget to run npm install with --force option :)

[Lms24]

Awesome, thank you!

don't forget to run npm install with --force option :)

I know, I'll bump the peer deps as soon as we figured this out ;)

[Lms24]

Workaround (only required for SSR)

Okay, so I tried a couple of things and I think this can be narrowed down to our SDK being imported into server code:

• app.config.ts imports Sentry and registers the Sentry ErrorHandler (+ Sentry TraceService in a full SKD setup)
• app.config.server.ts imports appConfig and merges it with its serverConfig object.

If I manually declare appConfig in app.config.server.ts without adding Sentry to it but keep Sentry providers in app.config.ts, ng serve works without an error message:

// app.config.server.ts

import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
import { provideServerRendering } from '@angular/platform-server';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { appConfig } from './app.config';

//import { appConfig } from './app.config';

const appConfigWithoutSentry: ApplicationConfig = {
  providers: [provideRouter(routes), provideClientHydration()],
};

const serverConfig: ApplicationConfig = {
  providers: [provideServerRendering()],
};

export const config = mergeApplicationConfig(
  // appConfig,
  appConfigWithoutSentry,
  serverConfig
);

What's important to know is that our SDK for Angular only works in the browser environment. It's not meant to be imported by the server (e.g. for SSR). We might expand angular SSR support in the future but we haven't looked into this a lot and additionally have a lot of other things going on.

Some other observations:

• Seems like everything works fine for Angular 17 apps without SSR, so I'm gonna bump peer deps soon.
• ng build also works for Angular 17 with SSR without the need for the workaround above