Server actions: Cannot use classes imported from ESM packages included in serverComponentsExternalPackages option

[pilcrowonpaper]

Link to the code that reproduces this issue

https://github.com/pilcrowOnPaper/next-server-actions-esm-class-repro

To Reproduce

1. Start the dev server
2. (Click the button on page /)
3. Observe the error in the console

Current vs. Expected behavior

I can't seem to use classes imported from ESM packages included in experimental serverComponentsExternalPackages option in server actions, when the action is imported from client components.

This works fine when the package is CJS, when the package is not included in serverComponentsExternalPackages, or when the action is passed down to the client component as a prop.

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 23.2.0: Wed Nov 15 21:54:10 PST 2023; root:xnu-10002.61.3~2/RELEASE_X86_64
Binaries:
  Node: 20.2.0
  npm: 9.6.6
  Yarn: 1.22.19
  pnpm: 8.10.2
Relevant Packages:
  next: 14.0.5-canary.60
  eslint-config-next: 14.0.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

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

App Router, Module resolution (CJS / ESM, module resolving)

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

next dev (local), next build (local)

Additional context

I need to use serverComponentsExternalPackages as certain modules (oslo/password) require Node specific modules (@node-rs/argon2)

_NEXT-2435

[pilcrowonpaper]

Here's the full error by the way:

 ⨯ actions/index.ts (5:14) @ action
 ⨯ TypeError: oslo__WEBPACK_IMPORTED_MODULE_2__.TimeSpan is not a constructor
    at action (./actions/index.ts:14:17)
  3 |
  4 | export async function action() {
> 5 |   console.log(new TimeSpan(30, "d").seconds());
    |              ^
  6 | }
  7 |
 ⨯ actions/index.ts (5:14) @ action
 ⨯ TypeError: oslo__WEBPACK_IMPORTED_MODULE_2__.TimeSpan is not a constructor
    at action (./actions/index.ts:14:17)
  3 |
  4 | export async function action() {
> 5 |   console.log(new TimeSpan(30, "d").seconds());
    |              ^
  6 | }
  7 |

[pilcrowonpaper]

Looks like inlining the import fixes the issue

new (await import("oslo/password")).Argon2id();

[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.