Ky: React native reference error in 0.5.1

[RemyLivewall]

I have been using this library on version 0.4.1 for some time and that works in react-native when running on the simulator with a debugger attached. Running on device results in Reference Error: self is not defined. This should be fixed in issue #53 (With commit f107e7b92d90e4b0287846a49ba3f30d9b9ca648) which is available from version 0.5.0. After upgrading ky to 0.5.0 or 0.5.1 Running on a simulator with a debugger attached or a device results in Reference Error: document is not defined.

I import ky and export an instance as follows:

import ky from "ky";
export const api = ky.extend({prefixUrl: BASE_URL});

The error shown in the console is as follows:

Possible Unhandled Promise Rejection (id: 0):
ReferenceError: document is not defined
ReferenceError: document is not defined
    at new Ky (blob:file:///58581b4b-dc99-4126-b9a9-cb3f918e33f0:111478:76)
    at Function.ky.(anonymous function) [as post] (blob:file:///58581b4b-dc99-4126-b9a9-cb3f918e33f0:111772:16)
    at _callee3$ (blob:file:///58581b4b-dc99-4126-b9a9-cb3f918e33f0:115504:24)
    at tryCatch (blob:file:///58581b4b-dc99-4126-b9a9-cb3f918e33f0:2081:19)
    at Generator.invoke [as _invoke] (blob:file:///58581b4b-dc99-4126-b9a9-cb3f918e33f0:2256:24)
    at Generator.prototype.(anonymous function) [as next] (blob:file:///58581b4b-dc99-4126-b9a9-cb3f918e33f0:2124:23)
    at tryCatch (blob:file:///58581b4b-dc99-4126-b9a9-cb3f918e33f0:2081:19)
    at invoke (blob:file:///58581b4b-dc99-4126-b9a9-cb3f918e33f0:2157:22)
    at blob:file:///58581b4b-dc99-4126-b9a9-cb3f918e33f0:2167:15
    at tryCallOne (blob:file:///58581b4b-dc99-4126-b9a9-cb3f918e33f0:6115:14)

[RemyLivewall]

After further investigation it seems to come from the following line of code: https://github.com/sindresorhus/ky/blob/5dbd4a2f7351f12d4ea683a3b827fe08d0e8cb7e/index.js#L138

This was added in the 0.5.1 with commit d6f81762fb965f6ae60b86de96f1a9d46501e575 which fixed issue #59. As document is not available in React-Native I am not sure if this issue is in the scope for this library and what a clean fix would be if it is in the scope.

[felixjung]

This is also a problem when trying to use ky in a SSR React app. I'd love to use ky, as it's much easier to handle than direct fetch or alternatives.

Is support for SSR something you'd still consider part of this library? The _globalThis polyfill in the main index.js seems to suggest that.

[sindresorhus]

Is support for SSR something you'd still consider part of this library?

Yes

[sindresorhus]

We just need to decide how Ky should handle document.baseURI not being available.

[felixjung]

Cool! In the meantime, I solved the situation in my NextJS app by adding things like Headers and document to the global object server side. I used node-fetch to get working implementations of these.

import fetch, { Headers } from 'node-fetch'

const BASE_URL = 'http://some.url'

if (typeof window === 'undefined') {
  global.document = {
    baseURI: BASE_URL,
  }
  global.fetch = fetch
  global.Headers = Headers
}

Ky's _globalThis polyfill automatically picks up global and things work as expected.

@sindresorhus, are you already tracking this topic in a different issue? Do you have an intuition for how you'd want to see this handled?

[sindresorhus]

Proposal:

If document.baseURI doesn't exist and the input is a relative URL:

• ...if the prefixUrl option is not set, we throw an error recommending the user to set that option.
• ...if the prefixUrl option is set, we just don't use document.baseURI.

Thoughts?

[sholladay]

Presumably these environments have some way to get the current URL, right? For example, an equivalent of location.href.

That would be the appropriate fallback when no DOM is present.

[felixjung]

@sholladay, well when you are running in plain node, then I would think, no. Most common scenario that comes to mind, and which I ran into, is a React page being rendered inside of an express app. I don't see how ky could be made aware of the original HTTP request causing the page render, without requiring quite some developer effort.