@sentry/integrations uses CommonJS for localforage breaking ESM compatibility

[beaucollins]

• Review the documentation: https://docs.sentry.io/
• Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
• Use the latest release: https://github.com/getsentry/sentry-javascript/releases
• Provide a link to the affected event from your Sentry account n/a

Package + Version

• @sentry/browser@6.2.5
• @sentry/node n/a
• raven-js n/a
• raven-node (raven for node) n/a
• other: @sentry/integrations@6.2.5

Version:

 @sentry/integrations@6.2.5

Description

Using require breaks ESM builds.

We're evaluating snowpack which requires all deps to be be ESM compatible. Everything in our project works except for @sentry/integrations.

Best we can tell it's due to using CommonJS's require:

sentry-javascript/packages/integrations/src/offline.ts

Line 7 in d98f5d6

const localForage = require('localforage');

Without being overly prescriptive it seems like the import * as localForageType from 'localforage'; could be used and no require is necessary.

sentry-javascript/packages/integrations/src/offline.ts

Line 4 in d98f5d6

import * as localForageType from 'localforage';

[EdwardHinkle]

This still seems broken in 6.3.0 when trying to import it into Angular

Error: node_modules/@sentry/integrations/dist/offline.d.ts:2:8 - error TS1259: Module '"localforage"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

import localForage from 'localforage';

node_modules/localforage/typings/localforage.d.ts:122:5
export = localforage;

This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

[kamilogorek]

esModuleInterop flag (which will fix your issue) is recommended by TS Team, so we decided to use it here - https://www.typescriptlang.org/tsconfig#esModuleInterop

[rgant]

I don't like the idea of needing to change my tsconfig to use Sentry...
I think maybe I should just roll back to the previous version and stay there until you all have your exports done proper.

Error: node_modules/@sentry/integrations/dist/offline.d.ts:2:8 - error TS1259: Module '"localforage"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

2 import localForage from 'localforage';
         ~~~~~~~~~~~

  node_modules/localforage/typings/localforage.d.ts:122:5
    122     export = localforage;
            ~~~~~~~~~~~~~~~~~~~~~
    This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

[rgant]

Yeah, enabling esModuleInterop breaks other things in my app. So I don't approve of this recommendation as a solution.

Error: src/app/app.module.ts:89:76 - error TS2322: Type '{ default: HammerStatic; defaults: HammerDefaults; VERSION: number; INPUT_START: 1; INPUT_MOVE: 2; INPUT_END: 4; INPUT_CANCEL: 8; STATE_POSSIBLE: 1; STATE_BEGAN: 2; ... 36 more ...; prefixed(obj: any, property: string): string; }' is not assignable to type 'HammerStatic'.
  Type '{ default: HammerStatic; defaults: HammerDefaults; VERSION: number; INPUT_START: 1; INPUT_MOVE: 2; INPUT_END: 4; INPUT_CANCEL: 8; STATE_POSSIBLE: 1; STATE_BEGAN: 2; ... 36 more ...; prefixed(obj: any, property: string): string; }' provides no match for the signature 'new (element: HTMLElement | SVGElement, options?: HammerOptions | undefined): HammerManager'.

89     { provide: HAMMER_LOADER, useValue: async (): Promise<HammerStatic> => import('hammerjs') },

[pablochud]

Please consider to reopen issue. It is still broken in 6.3.1. You can't force people to change their ts configuration.

ERROR in node_modules/@sentry/integrations/dist/offline.d.ts:2:8 - error TS1259: Module '"localforage"' can only be default-imported using the 'allowSyntheticDefaultImports' flag
2 import localForage from 'localforage';
         ~~~~~~~~~~~
  node_modules/localforage/typings/localforage.d.ts:122:5
    122     export = localforage;

[gisenberg]

Please fix this.