Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vite detects the web SDK as a CommonJS module #440

Open
aabounegm opened this issue Sep 8, 2022 · 0 comments · May be fixed by #441
Open

Vite detects the web SDK as a CommonJS module #440

aabounegm opened this issue Sep 8, 2022 · 0 comments · May be fixed by #441
Labels
enhancement New feature or request

Comments

@aabounegm
Copy link

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.

@aabounegm aabounegm linked a pull request Sep 8, 2022 that will close this issue
@dackers86 dackers86 added the enhancement New feature or request label Aug 16, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants