Incorrect ESM-CJS interop when importing an ESM package that imports a CJS/UMD package

[agilgur5]

Link to the code that reproduces this issue

https://github.com/agilgur5/rsc-issue-128. See a live demo on StackBlitz

To Reproduce

1. npm install && npm run dev
2. Draw a signature and click the "Trim" button
3. Get a runtime error: TypeError: trim_canvas__WEBPACK_IMPORTED_MODULE_8__ is not a function

Current vs. Expected behavior

I expect the "Trim" button to work and show a trimmed version of the signature underneath the buttons instead of getting a run-time error.

The bundler configuration appears to have some bug in its ESM-CJS interop. The react-signature-canvas package defaults to an ESM build and imports trim-canvas, which only has a CJS/UMD build. It only has a single default export which is compiled as exports=trimCanvas(...).

Next.js's bundled code seems to be missing the __importDefault helper of TypeScript's esModuleInterop and assuming that trim-canvas's exports is an object, when it is actually a singular function.

This differs from using Webpack directly or Parcel, which both work fine without errors. Given the difference to plain Webpack, this suggests that there is a bug in Next.js's Webpack configuration.

As further evidence, using the CJS/UMD build of react-signature-canvas works fine with:

const { SignatureCanvas } = require('react-signature-canvas')

Using an older version like 1.0.7 that only has a UMD build similarly works fine.

Only the ESM-CJS interop of dependencies of dependencies seems to have an issue.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: Ubuntu 20.04.0 LTS Wed Apr 16 2025 22:45:49 GMT-0400 (Eastern Daylight Time)
  Available memory (MB): NaN
  Available CPU cores: 2
Binaries:
  Node: 20.19.0
  npm: 10.8.2
  Yarn: 1.22.19
  pnpm: 8.15.6
Relevant Packages:
  next: 15.3.1-canary.11 // Latest available version is detected (15.3.1-canary.11).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.2.2
Next.js Config:
  output: N/A

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

Webpack, SWC

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

next dev (local), next build (local)

Additional context

Other Troubleshooting

Still has the same error when:

1. Using Next.js 13, 14, 15, and canary
2. Using the App Router instead of the Pages Router
3. Setting swcMinify: false in next.config.js
4. Modifying esModuleInterop in tsconfig.json

Other Bundlers

1. The Webpack reproduction has no error.
2. The Parcel reproduction has no error.
3. The Vite reproduction has a similar error to Next.js, but only with vite dev and not with vite build && vite preview.

Other Related Issues

These aren't entirely the same, but if you search the issues for "is not a function" or "webpack_imported_module", you'll get many results. Specifically these seemed quite similar: #65056, #63795, #57584 and possibly many more like #62953, #68413, #52188 etc. __WEBPACK_IMPORTED_MODULE_*__ is not a function is a common error in these and the ESM-CJS interop is referenced in some too.
Again, they're not exactly the same though and don't all have minimal reproductions. This one is a very tiny reproduction, ~30 LoC of Next.js code and the imported libraries are ~100 LoC each. I have also maintained both the directly imported library (react-signature-canvas) and its dependency (trim-canvas) for almost a decade now, so I know them inside-out. I'm raising this because my users filed issues like agilgur5/react-signature-canvas#128 about this and I debugged it as a Next.js issue.