Next.js: Default fetch polyfill breaks ky-universal

[paambaati]

Bug report

I use ky-universal, which is built on top of node-fetch. After upgrading to Next.js 9.4, it has started throwing "Only absolute URLs are supported" errors on the Node.js side, even though an absolute URL is set and it works on Next.js 9.3.x.

To Reproduce

1. Use ky-universal in a Next.js project to make a request on the server side.
2. Watch it throw a "Only absolute URLs are supported" error.

Expected behavior

Shouldn't throw an error, and should work like it did in Next.js 9.3.x.

System information

• OS: macOS
• Version of Next.js: 9.4.0
• Version of Node.js: 14.1.0

Additional context

It looks like the default polyfill is interfering with the library somehow, but I can't figure out what/how. Also, pasting from https://github.com/zeit/next.js/pull/12353#issuecomment-627064091 —

node-fetch has an upcoming v3 release (in beta now) that fixes a long-standing issue, and ky-universal is in the process of using it in their next release, which is vital when working with large API payloads.

Similar reports —

1. https://github.com/zeit/next.js/pull/12353#issuecomment-625114086
2. https://github.com/zeit/next.js/discussions/12732

[stfnsr]

I thought that with Next.js 9.4 it would be possible to use ky instead of ky-universal, as fetch is already polyfilled by Next.js.
Is this not the case?

[joshwaiam]

The suggestion to use ky instead of ky-universal is something I did not try and I thought would work. However, trying just the ky package ends up with a message SyntaxError: Unexpected token 'export'

[stfnsr]

Yep, can confirm.
Same issue with "Unexpected token 'export'" :/
Will stick to vanilla fetch for the time being.

[YukiKitagata]

I have encountered the same error.

For the time being, I added the following code and the error is gone.

if (typeof window === 'undefined')
  (global as any).fetch = require('node-fetch');

[paambaati]

@YukiKitagata Thanks for the temporary workaround. Where exactly is this used? _app?

[YukiKitagata]

@paambaati I'm using ky.extend, so I'm adding it before call ky.extend.

[paambaati]

@YukiKitagata Can you show us an example? I can't seem to find this extensions API in Ky's documentation.

[YukiKitagata]

@paambaati

Sorry, that was a typo on my part.
ky.extensions is a mistake for ky.extend.

I tried adding it to the top of _app and it worked well.

[joshwaiam]

I was able to put the fix by @YukiKitagata into practice. Wanted to paste it here for @paambaati and anyone else that may be unclear of how to implement it.

1) Run npm i node-fetch
2) Modify the _app.tsx like below.
3) Using ky.post or anything else ky related works again as expected.

import ky from 'ky-universal';

if (typeof window === 'undefined')
  (global as any).fetch = require('node-fetch');

function MyApp({ Component, pageProps }: AppProps): JSX.Element {

[timneutkens]

Hey! Thanks for the report, I've fixed the issue here: #12804

[paambaati]

@timneutkens

[paambaati]

@timneutkens Thanks, I can confirm that this is fixed and ky-universal works fine on 9.4.1-canary.1.