feat: ✨ Add ESM module support

[bjornharvold]

What happened?

Getting this when compiling with the latest Angular 17.x.

WARNING] Module '@stripe/stripe-js/pure' used by 'libs/stripe/ui-elements-issuing/src/lib/components/elements-issuing.component.ts' is not ESM

Here's our package.json import statement:
"@stripe/stripe-js": "2.1.11",

Here's how we import in our Angular component:
import { loadStripe } from '@stripe/stripe-js/pure';

Can you please support ESM modules?

Environment

No response

Reproduction

No response

[brendanm-stripe]

Hey @bjornharvold -- there should be an ESM variant of the /pure import available for use:
https://github.com/stripe/stripe-js/blob/master/rollup.config.js#L32

Can you share what your element integration looks like?

[bjornharvold]

Apologies, should've added that during ticket creation.

Updated ticket

[brendanm-stripe]

While it's an undocumented pattern, you should be able to import that pure.esm.js output directly:

const { loadStripe } = await import('@stripe/stripe-js/dist/pure.esm.js');
const stripe = await loadStripe('pk_test_123');

See my quick & dirty demo of this import running here: https://stackblitz.com/edit/stackblitz-starters-3nczh2
Note that I had to declare the module in the stripejspure.d.ts file & use ts-ignore on the import. Our support for this is still in early stages, so this was option was added to unblock similar use cases. I hope we can improve support for this in parallel to the common pattern in future, but can't make any promises on that.

[bjornharvold]

Thanks @brendanm-stripe

Sneaky indeed 🍺

[laverdet]

Stripe will need to either rename the output "dist" file to end with .mjs, or add "type":"module" to the package.json. Right now the ESM export is not ESM except in name. You can verify plainly using the nodejs CLI:

-> % node
Welcome to Node.js v20.8.0.
Type ".help" for more information.
> import('@stripe/stripe-js/pure')
Promise {
  <pending>,
  [Symbol(async_id_symbol)]: 189,
  [Symbol(trigger_async_id_symbol)]: 6
}
> Uncaught:
Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'node_modules/@stripe/stripe-js/pure' imported from .
Did you mean to import @stripe+stripe-js@2.4.0/node_modules/@stripe/stripe-js/pure.js?
    at new NodeError (node:internal/errors:406:5)
    at finalizeResolution (node:internal/modules/esm/resolve:233:11)
    at moduleResolve (node:internal/modules/esm/resolve:845:10)
    at defaultResolve (node:internal/modules/esm/resolve:1043:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:228:38)
    at ModuleLoader.import (node:internal/modules/esm/loader:315:34)
    at importModuleDynamically (node:repl:531:47)
    at importModuleDynamicallyWrapper (node:internal/vm/module:431:21) {
  url: 'file:///Users/marcel/braid/web/packages/web/node_modules/@stripe/stripe-js/pure',
  code: 'ERR_MODULE_NOT_FOUND'
}
> import('@stripe/stripe-js/dist/pure.esm.js')
Promise {
  <pending>,
  [Symbol(async_id_symbol)]: 209,
  [Symbol(trigger_async_id_symbol)]: 6
}
> (node:41260) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
@stripe+stripe-js@2.4.0/node_modules/@stripe/stripe-js/dist/pure.esm.js:200
export { loadStripe };
^^^^^^

Uncaught SyntaxError: Unexpected token 'export'