Skip to content

Vite detects the web SDK as a CommonJS module #440

Open
@aabounegm

Description

@aabounegm

Bug report

Describe the bug

The firestore-stripe-web-sdk module is written as an ES Module, but it has a few problems that make it invalid ESM. First, there is no "type": "module" field in package.json and the files do not use the .mjs extension. Second, the relative imports need the full extension (as mentioned in TypeScript's docs), which they currently don't have.

import { getStripePayments } from "@stripe/firestore-stripe-payments";
         ^^^^^^^^^^^^^^^^^
SyntaxError: Named export 'getStripePayments' not found. The requested module '@stripe/firestore-stripe-payments' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@stripe/firestore-stripe-payments';
const { getStripePayments } = pkg;

To Reproduce

It should be reproduceable with simpler configurations (without a framework), but I faced the issue when working with SvelteKit, so the the repro is based on SvelteKit.

Steps to reproduce the behavior:

  1. npm create svelte@latest demo-app (choose Skeleton project for simplicity)
  2. cd demo-app and npm install
  3. npm install firebase @stripe/firestore-stripe-payments @sveltejs/adapter-static
  4. Replace adapter-auto import with adapter-static in svelte.config.js
  5. Add the following content to src/routes/+page.svelte:
    <script>
        import { getApp } from '@firebase/app';
        import { getStripePayments } from '@stripe/firestore-stripe-payments';
    
        const app = getApp();
        const payments = getStripePayments(app);
        console.log(payments);
    </script>
  6. Add a src/routes/+layout.js file with just export const prerender = true; inside.
  7. Run npm run build

Expected behavior

It should work normally.

System information

  • OS: Windows 10
  • Browser: Chrome
  • Node: v16.15.1

Additional context

Some build systems may auto-detect the module system and ignore the missing extension problem, but that doesn't make it a valid ES Module. In particular, I didn't face this issue with SvelteKit v1.0.0-next.350, but when I updated to a recent version that requires a separate vite config and the Vite CLI I got the error above. I'm not sure about the underlying difference between both versions.

Solution

The solution is simple:

  1. Add "type": "module" to package.json
  2. Add the .js extension to all relative imports (even if the source files are TS)

I can submit a PR with the fixes if needed.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions