Breaks on React Native Web

[jaxoncreed]

Search terms you've used

N/A

Bug description

When running in a React Native Web environment (https://necolas.github.io/react-native-web/) the following error is thrown when trying to fetch:

TypeError: 'fetch' called on an object that does not implement interface Window.

Specifically, the error is thrown when used on this line in @inrupt/oidc-client-ext. Note this is the compiled code for oidc-client-ext. I am unsure where this library's code is hosted as the link in the NPM package to github is broken:

Line 156 in index.js inside the "getTokens" function
const rawTokenResponse = await universalFetch.fetch(issuer.tokenEndpoint, tokenRequestInit);

To Reproduce

1. Set up a React Native Project. For the easiest install, follow the instructions for Expo: https://docs.expo.dev/tutorial/create-your-first-app/
2. Set up a simple login page using @inrupt/solid-client-authn-browser (We only need the browser component because mobile works fine. Doing this is the same as installing solid-authn-react-native because the library falls back to solid-client-authn-browser when run in a web environment)
3. Try to log in. The login will fail when handleIncomingRedirect is called due to universal-fetch.

Expected result

Fetch works

Actual result

An error is thrown. It may be difficult to see the error because the error doesn't bubble up through promises. Surrounding the line of code in try catch statements can let you see the error.

Environment

$ npx envinfo --system --npmPackages --binaries --npmGlobalPackages --browsers

 System:
    OS: macOS 13.0.1
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 405.76 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.18 - ~/.nvm/versions/node/v16.13.1/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v16.13.1/bin/npm
    Watchman: 2022.11.28.00 - /usr/local/bin/watchman
  Browsers:
    Chrome: 114.0.5735.198
    Safari: 16.1
  npmPackages:
    @babel/core: ^7.20.0 => 7.22.5 
    @eva-design/eva: ^2.2.0 => 2.2.0 
    @expo/webpack-config: ^18.0.1 => 18.1.0 
    @typescript-eslint/eslint-plugin: ^5.59.11 => 5.60.1 
    @typescript-eslint/parser: ^5.59.11 => 5.60.1 
    @ui-kitten/components: ^5.3.1 => 5.3.1 
    @ui-kitten/eva-icons: ^5.3.1 => 5.3.1 
    eslint: ^8.43.0 => 8.44.0 
    eslint-config-universe: ^11.2.0 => 11.2.0 
    expo: ~48.0.18 => 48.0.19 
    expo-constants: ~14.2.1 => 14.2.1 
    expo-linking: ~4.0.1 => 4.0.1 
    expo-router: ^1.5.3 => 1.5.3 
    expo-status-bar: ~1.4.4 => 1.4.4 
    ldo-solid-react: 0.0.5 => 0.0.5 
    prettier: ^2.8.8 => 2.8.8 
    react: ^18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    react-native: 0.71.8 => 0.71.8 
    react-native-gesture-handler: ~2.9.0 => 2.9.0 
    react-native-safe-area-context: 4.5.0 => 4.5.0 
    react-native-screens: ~3.20.0 => 3.20.0 
    react-native-svg: 13.4.0 => 13.4.0 
    react-native-web: ~0.18.10 => 0.18.12 
    typescript: ^4.9.4 => 4.9.5 
  npmGlobalPackages:
    @solid/community-server: 5.0.0
    bcrypt: 5.0.1
    corepack: 0.10.0
    eas-cli: 0.47.0
    expo-cli: 6.2.1
    generator-comunica: 1.0.0
    gulp: 4.0.2
    jest: 27.5.1
    jsonld-dataset-proxy: 1.2.3
    ldo: 1.0.3
    lerna: 6.6.1
    node-gyp: 9.1.0
    npm-check-updates: 12.0.5
    npm: 9.6.7
    o-dataset-pack: 0.2.14
    readable-stream: 4.2.0
    shexj2typeandcontext: 2.0.1
    solid-authn-react-native: 2.0.2
    solid-file-client: 2.1.0
    solid-server: 5.7.4
    type-traverser: 0.0.3
    typescript: 4.6.4
    wml: 0.0.83
    yarn: 1.22.18
    yo: 4.3.0

Additional information

[jaxoncreed]

Seems to be related to inrupt/solid-client-authn-js#944

[jaxoncreed]

This actually might not be the fault of universal fetch. I will close this issue while I diagnose the problem.

[jaxoncreed]

Reopening the issue with more specific findings.

This problem does not occur in all configurations of React Native. It occurs with Metro Blunder 0.76.4 and expo-router (a popular routing engine).

I've created a library that can be cloned to test the problem here: https://github.com/jaxoncreed/solid-auth-react-native-problem

[Zwifi]

Thanks for reporting this @jaxoncreed . We don't support React Native at the moment, and technically universal-fetch gets you the native fetch in all environments except Node 16, which I don't expect React Native to use. The TypeError: 'fetch' called on an object that does not implement interface Window. error is an error thrown by the native browser fetch when it gets rebound to a non-window object, I'm not sure what is causing this here, but that probably comes from solid-client-authn, rather than this library.

[Jesse Wright]

Closing as this library is being deprecated #422