@sentry/remix doesn't work with Node ESM support

[tmcw]

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/remix

SDK Version

7.55.2

Framework Version

1.18.1

Link to Sentry event

No response

SDK Setup

This is reproducible without setup

Steps to Reproduce

Create a file:

import * as Sentry from "@sentry/remix"

console.log(Sentry);

You would expect the Sentry object to contain methods like captureEvent

Expected Result

It doesn't. The import to @sentry/node under the hood fails to pull named exports and instead you get a default object under the exports that contains all of the event-capturing methods. This makes the included TypeScript types incorrect and makes a line like

Sentry.captureException(e);

Fail because the method is actually at

Sentry.default.captureException(e);

But in a typescript environment, you can't write the latter because the types say that captureEvent is a named export, not nested under a default object.

Actual Result

[Module: null prototype] {
 ErrorBoundary: [class ErrorBoundary extends Component],
 __esModule: true,
 default: {
 ErrorBoundary: [class ErrorBoundary extends Component],
 withErrorBoundary: [Function: withErrorBoundary],
 remixRouterInstrumentation: [Function: remixRouterInstrumentation],
 withSentry: [Function: withSentry],
 wrapExpressCreateRequestHandler: [Function: wrapExpressCreateRequestHandler],
 init: [Function: init],
 Hub: [class Hub],
 SDK_VERSION: '7.55.2',
 Scope: [class Scope],
 addBreadcrumb: [Function: addBreadcrumb],
 addGlobalEventProcessor: [Function: addGlobalEventProcessor],
 captureCheckIn: [Function: captureCheckIn],
 captureEvent: [Function: captureEvent],
 captureException: [Function: captureException],
 captureMessage: [Function: captureMessage],
 configureScope: [Function: configureScope],
 createTransport: [Function: createTransport],
 extractTraceparentData: [Function: extractTraceparentData],
 getActiveTransaction: [Function: getActiveTransaction],
 getCurrentHub: [Function: getCurrentHub],
 getHubFromCarrier: [Function: getHubFromCarrier],
 makeMain: [Function: makeMain],
 runWithAsyncContext: [Function: runWithAsyncContext],
 setContext: [Function: setContext],
 setExtra: [Function: setExtra],
 setExtras: [Function: setExtras],
 setTag: [Function: setTag],
 setTags: [Function: setTags],
 setUser: [Function: setUser],
 spanStatusfromHttpCode: [Function: spanStatusfromHttpCode],
 startTransaction: [Function: startTransaction],
 trace: [Function: trace],
 withScope: [Function: withScope],
 autoDiscoverNodePerformanceMonitoringIntegrations: [Function: autoDiscoverNodePerformanceMonitoringIntegrations],
 NodeClient: [class NodeClient extends BaseClient],
 makeNodeTransport: [Function: makeNodeTransport],
 close: [AsyncFunction: close],
 defaultIntegrations: [
 [InboundFilters],
 [FunctionToString],
 [Console],
 [Http],
 [Undici],
 [OnUncaughtException],
 [OnUnhandledRejection],
 [ContextLines],
 [LocalVariables],
 [Context],
 [Modules],
 [RequestData],
 [LinkedErrors]
 ],
 defaultStackParser: [Function (anonymous)],
 flush: [AsyncFunction: flush],
 getSentryRelease: [Function: getSentryRelease],
 lastEventId: [Function: lastEventId],
 DEFAULT_USER_INCLUDES: [ 'id', 'username', 'email' ],
 addRequestDataToEvent: [Function: addRequestDataToEvent],
 extractRequestData: [Function: extractRequestData],
 deepReadDirSync: [Function: deepReadDirSync],
 Handlers: {
 extractRequestData: [Function: extractRequestData],
 parseRequest: [Function: parseRequest],
 errorHandler: [Function: errorHandler],
 requestHandler: [Function: requestHandler],
 tracingHandler: [Function: tracingHandler],
 trpcMiddleware: [Function: trpcMiddleware]
 },
 Integrations: {
 FunctionToString: [Function],
 InboundFilters: [Function],
 Console: [Function],
 Http: [Function],
 OnUncaughtException: [Function],
 OnUnhandledRejection: [Function],
 LinkedErrors: [Function],
 Modules: [Function],
 ContextLines: [Function],
 Context: [Function],
 RequestData: [Function],
 LocalVariables: [Function],
 Undici: [Function],
 Apollo: [Function],
 Express: [Function],
 GraphQL: [Function],
 Mongo: [Function],
 Mysql: [Function],
 Postgres: [Function],
 Prisma: [Function]
 }
 },
 init: [Function: init],
 remixRouterInstrumentation: [Function: remixRouterInstrumentation],
 withErrorBoundary: [Function: withErrorBoundary],
 withSentry: [Function: withSentry],
 wrapExpressCreateRequestHandler: [Function: wrapExpressCreateRequestHandler]
}

[Lms24]

Hi @tmcw thanks for writing in!

This sounds oddly familiar. I believe we had the same problem in SvelteKit (#7644) and Serverless (#7457) and its related to us mixing default/wildcard exports with named exports.

@onurtemizkan would you mind taking a look at this? We probably need to add the explicit exports like in the linked PRs.