Bug: SendGrid setApiKey() fails in Server Actions with Turbopack

[kyeb]

Link to the code that reproduces this issue

https://github.com/kyeb/sendgrid-turbopack-bug

To Reproduce

1. Clone the repository: git clone https://github.com/kyeb/sendgrid-turbopack-bug
2. Install dependencies: npm install
3. Start with Turbopack: npm run dev
4. Test the server action: curl http://localhost:3000/api/test
5. Observe the error in the response and server console

Current vs. Expected behavior

Current behavior:
When calling @sendgrid/mail.setApiKey() from a Server Action with Turbopack enabled, it throws:

TypeError: Cannot read properties of undefined (reading 'client')
    at testSendGrid (app/action.ts:8:21)

Expected behavior:
setApiKey() should work consistently across all bundlers. The same code works fine when using webpack bundler (npm run dev:webpack).

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.5.0
Binaries:
  Node: 22.14.0
  npm: 11.4.1
Relevant Packages:
  next: 15.4.0-canary.84
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.8.3
  @sendgrid/mail: 8.1.5

Which area(s) are affected? (Select all that apply)

Turbopack (--turbo)

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

This issue only occurs when all three conditions are met:

1. Next.js canary with Turbopack enabled (--turbo)
2. Server Actions ('use server')
3. SendGrid's setApiKey() method

The same code works fine in Server Actions with webpack bundler, suggesting this is a Turbopack-specific issue with how it handles the SendGrid module's internal state or initialization.

[lubieowoce]

Seems to work fine if you use a default import instead. @sendgrid/mail has one export, a singleton instance of MailService, so using a default import is better.

import sgMail from "@sendgrid/mail";

---

As for the root cause -- I suspect that this is related to ESM namespace interop (because of import * as sgMail) with a CJS module that exports a class instance.
The call to sgMail.setApiKey errors with

 TypeError: Cannot read properties of undefined (reading 'client')

This happens on this line inside the MailService class:

class MailService {
    // ...
    setApiKey(apiKey) {
        this.client.setApiKey(apiKey);
        return this;
    }
    // ...
}

It crashes because this is undefined, which suggests that the method isn't bound to the class anymore. So I'm guessing that the methods get treated like they're just a plain object of functions (as in function foo(){}; module.exports = { foo }) and become unbound.

EDIT
After looking into it a bit more, it seems like the fact that this works in webpack is because webpack isn't compliant with the Ecmascript specification. import * should always return a Module namespace object, but webpack is just returning the MailService instance instead without extra wrapping, which is why calling methods on it works as expected. This is more permissive, but incorrect. So the correct solution is to change your code to use a default import, and avoid this problem altogether.

The fact that webpack and turbopack diverge here is unfortunate, but it's really down to webpack being more permissive than it should be (presumably for legacy/compatibility reasons). It's unlikely that we'll be changing the Turbopack behavior to support this -- if anything, we might try to make webpack behave like turbopack does to avoid the disparity.

[timneutkens]

Going to close this issue as @lubieowoce's assessment is correct, though unfortunate, you'll need to change the code.

[kyeb]

Thanks for looking into this, appreciate it!!

[timneutkens]

No problem! Thanks for the clear reproduction

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.