13.4.6-canary.1 broke isomorphic fetch for 3rd party library

[khuezy]

Verify canary release

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

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Mon Apr 24 20:52:24 PDT 2023; root:xnu-8796.121.2~5/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.14.0
      npm: 9.3.1
      Yarn: 1.22.19
      pnpm: 8.6.2
    Relevant packages:
      next: 13.4.6-canary.2
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.3

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue or a replay of the bug

https://github.com/khuezy/next-error

To Reproduce

Reproduction steps also in readme

1. npm install
2. npm run dev
3. Go to localhost:3000
4. Notice error: libsql_isomorphic_fetch__WEBPACK_IMPORTED_MODULE_0_.Headers is not a constructor
5. Downgrade next from 13.4.6-canary.2 to 13.4.6-canary.0 and rerun npm install
6. Go to localhost:3000
7. Notice there's no error (request will timeout b/c db url is invalid)

Describe the Bug

Next 13.4.6-canary.1 or 13.4.6-canary.2 introduced a change that prevents libsql client to run due to this error:

uncaughtException: Error [TypeError]: _libsql_isomorphic_fetch__WEBPACK_IMPORTED_MODULE_0__.Headers is not a constructor

NOTE: This also happens in latest canary.

Expected Behavior

Next shouldn't break external library usage of isomorphic fetch.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[ijjk]

Hi, any chance you could share the first version this issue occurred in? It doesn't seem to be specific to 13.4.6-canary.2.

[khuezy]

Hi @ijjk thanks for looking into this. canary.0 doesn't reproduce, I am unable to install canary.1 b/c it doesn't exist on npm anymore?

[ijjk]

Hi, thanks for confirming that, the canary.1 did fail to publish so seems it's most likely related to https://github.com/vercel/next.js/pull/51179/files

cc @huozhi

[ijjk]

Hi, this should be fixed in v13.4.6-canary.6 of Next.js, please update and give it a try!

[khuezy]

Thanks @ijjk for the quick turn around. I've updated and it works now 👍

[huozhi]

Investigate a bit, it's a bug of ESM usage in @libsql/isomorphic-ts

https://github.com/libsql/isomorphic-ts/blob/beefebc0c50fa8b690f767d0d13b8ac74a1203bd/isomorphic-fetch/node.mjs#L1-L3

They're not using the ESM imports to access Request / Headers etc from node-fetch package, I filed an issue and a PR (libsql/isomorphic-ts#2) on libsql side

The change should be safe to land again

[khuezy]

Thanks @huozhi !

[github-actions]

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