fetch-cookie fails at startup for react-native app

[Mudenz]

Hi!

I am attempting to use fetch-cookie in a react native application. I get the following runtime error after I only added the import

Android Bundling failed 1662ms 
While trying to resolve module 'fetch-cookie' from file 'C:\Git\mobski\App.js', 
the package 'C:\Git\mobski\node_modules\fetch-cookie\package.json' was successfully found. 
However, this package itself specifies a 'main' module field that 
could not be resolved ('C:\Git\mobski\node_modules\fetch-cookie\index'. Indeed, none of these files exist:

C:\Git\mobski\node_modules\fetch-cookie\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
C:\Git\mobski\node_modules\fetch-cookie\index\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)

I tried running npm install in node_modules/fetch_cookie and got the following error, but im not sure if this is relevant?

> for format in esm cjs; do esbuild src/*.ts --format=$format --outdir=$format; done

format was unexpected at this time.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! fetch-cookie@2.0.1 build: `for format in esm cjs; do esbuild src/*.ts --format=$format --outdir=$format; done`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the fetch-cookie@2.0.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\yoste\AppData\Roaming\npm-cache\_logs\2022-03-15T22_56_22_810Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! fetch-cookie@2.0.1 prepare: `npm run build && npm run type-declarations`
npm ERR! Exit status 1

package.json looks like this:

{
  "name": "mobski",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "crypto-js": "3.1.9-1",
    "expo": "~44.0.0",
    "expo-status-bar": "~1.2.0",
    "fetch-cookie": "^2.0.1",
    "node-fetch": "^3.2.3",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-crypto": "^2.2.0",
    "react-native-randombytes": "^3.6.1",
    "react-native-web": "0.17.1",
    "request": "^2.88.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "rn-nodeify": "github:tradle/rn-nodeify"
  },
  "private": true
}

I have also attempted to make a metro.config.js as described in https://stackoverflow.com/questions/60124435/however-this-package-itself-specifies-a-main-module-field-that-could-not-be-r, but still same error.

I am using React-Native and Expo, developing on Windows. Running on Android emulator using Android Studio. Npm version 6.14.15 and node version 14.17.6.

Any ideas what I can attempt to solve this? Any help would be greatly appreciated

[valeriangalliat]

Ahh I'm thinking that might be React Native not supporting the exports property in package.json? https://github.com/valeriangalliat/fetch-cookie/blob/master/package.json#L8

Can you try editing node_modules/fetch-cookie/package.json and adding the following keys:

    "main": "./cjs/index-wrapper.js",
    "module": "./esm/index.js",

And let me know if that solves the build? If so I'll publish an update to include those

[Mudenz]

Thanks for the quick reply!

I added what you suggested to the root in node_modules/fetch-cookie/package.json, but unfortantly getting same error when running npm install in the node_modules/fetch-cookie folder.

[valeriangalliat]

Ah yeah that part is normal, that's the fetch-cookie build scripts not being compatible with Windows but you shouldn't need that because it's shipped on npm prebuilt!

Can you rerun the build that triggered the Android Bundling failed 1662ms error (your first error message)?

Edit: I just published 2.0.2 with this change because I think that it's a good addition either way, so you can just try to install fetch-cookie@2.0.2 and see if that fixes the issue :)

[Mudenz]

I am having some progress! New error message when running the app:

Android Bundling failed 810ms
Unable to resolve module node:http from C:\Git\mobski\node_modules\node-fetch\src\index.js: node:http could not be found within the project or in these directories:
  node_modules

If you are sure the module exists, try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*
   7 |  */
   8 | 
>  9 | import http from 'node:http';
     |                   ^
  10 | import https from 'node:https';
  11 | import zlib from 'node:zlib';
  12 | import Stream, {PassThrough, pipeline as pump} from 'node:stream';

I tried installing the http package, but that didnt help.

[valeriangalliat]

Looks like that solved the fetch-cookie issue at least! This one seems specific to node-fetch

node-fetch is really built for the Node environment so I don't think it's supposed to work with React Native, Expo and such... but I believe you should have a working global fetch function out of the box in there anyways?

[Mudenz]

Yes. I investigated a bit further and concluded I couldn't find a workaround for this library using node-specific packages that is unavailable in react native. I can achieve what I intend to do with fetch, its just more work.

Thank you anyways for the help!