The compatibility between cross-fetch and React Native is currently not supported

I have developed an API wrapper that utilizes fetch to carry out the API requests. To ensure compatibility with Browsers, Node, and React Native, I incorporate cross-fetch. When testing the wrapper in Node, everything works fine. However, when using it in React Native, it fails with the error message: 

TypeError: undefined is not a function (evaluating 'cross_fetch_1.default(url, init)')
. Upon checking the type of cross_fetch_1, I observed:

{ [Function]
  polyfill: true,
  Response: { [Function: Response] error: [Function], redirect: [Function] },
  Request: [Function: Request],
  Headers: [Function: Headers] }

and "undefined" for either cross_fetch_1.default or cross_fetch_1.fetch.

The library was written in Typescript, so the cross_fetch_1 variable is generated by the TS compiler. The Typescript code can be found here https://github.com/tgamauf/onetimesecret-api/blob/1b8edff66bde11807c8ff7d29030b4d3e6661277/lib/request.ts#L150, and the compiled JS version here https://github.com/tgamauf/onetimesecret-api/blob/1b8edff66bde11807c8ff7d29030b4d3e6661277/lib/request.js#L179.

Despite following the correct usage of the module, I am encountering this issue. What could be causing it?

I have also raised a github issue regarding this problem here: https://github.com/lquixada/cross-fetch/issues/26

javascripttypescriptreact-nativefetch-api

Answer №1

When incorporating cross-fetch into your React Native project, the module bundler for React Native will choose the file 

node_modules/cross-fetch/dist/browser-ponyfill.js
based on the specified browser field in the 
node_modules/cross-fetch/package.json
; this configuration can be found here. However, it's worth noting that 
node_modules/cross-fetch/dist/browser-ponyfill.js
only provides an export assignment without a default export:

if (typeof module === 'object' && module.exports) {
module.exports = fetch;
}

In contrast, 

node_modules/cross-fetch/dist/node-ponyfill.js
contains both an export assignment and a default export:

module.exports = exports = fetch;
exports.fetch = fetch;
exports.Headers = nodeFetch.Headers;
exports.Request = nodeFetch.Request;
exports.Response = nodeFetch.Response;

// This is necessary for TypeScript.
exports.default = fetch;

If you enable the esModuleInterop compiler option in your TypeScript project, it will bridge the gap and allow you to use the default import with the export assignment. However, considering that node-ponyfill.js indicates that the creators of cross-fetch wanted to support users who don't use esModuleInterop, it would make sense for them to adjust browser-ponyfill.js to function under the same conditions. It seems like you've already raised an issue regarding this matter.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Typescript compiler will continue to generate JavaScript code even if there are compilation errors

As a fresh learner of TypeScript, I have been experimenting with some basic concepts. Below is the code from my file app1.ts: class Monster { constructor(name, initialPosition) { this.name = name; this.initialPosition = initialPosition ...

javascripttypescript

Is there a way to implement prototype inheritance without contaminating an object's prototype with unnecessary methods and properties?

I prefer not to clutter the object prototype with all my library's methods. My goal is to keep them hidden inside a namespace property. When attempting to access an object property, if it is undefined, the script will search through the prototype cha ...

javascript

Tips for displaying axios status on a designated button using a spinner

Utilizing a v-for loop to showcase a list of products retrieved from an API request. Within the product card, there are three buttons, one for adding items to the cart with a shopping-cart icon. I aim for the shopping-cart icon to transform into a spinner ...

javascriptphplaravelvue.js

What is the best way to interpret the data from forkjoin map?

As a newcomer to angular and rxjs, I am seeking guidance on how to properly retrieve data from forkJoin using a map function. ngOnInit(): void { this.serviceData.currentService.subscribe(service => this.serviceFam.getAllFamilles().pipe( ...

angulartypescriptrxjs

struggling to develop a sophisticated 'shopping cart organization' program

I am in the process of creating a database for video spots, where users can view and modify a list of spots. I am currently working on implementing a cart system that automatically stores checked spot IDs as cookies, allowing users to browse multiple pages ...

javascriptjqueryhtml

What was Douglas Crockford trying to convey with the term 'created in an alternate window or frame'?

What did Douglas Crockford mean when he mentioned that the is_array() test might not correctly identify arrays created in a different window or frame? var is_array = function (value) { return value && typeof value === 'object&apos ...

javascriptarrays

The method this.$el.querySelector does not exist

The data retrieved from the database is inserted into the input fields and submitted as a form. This data is an object that passes the value to the database. However, when I trigger this form, an error occurs. See example of the error <input id=" ...

javascripttypescriptvue.js

Toggle the visibility of items based on the user's login status

Below is the code snippet for when the user is logged out: <div class="fusion-secondary-main-menu"> <div class="fusion-row"> <?php avada_main_menu(); ?> <?php avada_mobile_menu_search( ...

javascriptphphtmlcss

Ways to customize the bootstrap-datetimepicker to display time in 15-minute increments

Here is my code in JavaScript to increment by minutes at a 1-hour interval: fillMinutes = function () { var table = widget.find('.timepicker-minutes table'), currentMinute = viewDate.clone().startOf('h'), ...

javascriptjqueryasp.net-mvcbootstrap-modal

Error in browser caused by JQuery JavaScript, not Dreamweaver

I need help creating a webpage that can extract and display recent earthquake data based on user input location on Google Maps. I have been using Dreamweaver to test my code, and everything functions perfectly when I use the live webpage feature within th ...

javascriptjqueryhtmlajaxjson

Navigating with React: creating custom headerBackTitles in a StackNavigator for maximum flexibility

I'm currently using react-navigation for my react-native app and have reviewed the documentation on headerBackTitle. However, I'm facing an issue in setting different headerBackTitle when navigating from various screens within the stack. For exa ...

reactjsreact-nativereact-navigationstack-navigator

when webpack loads the bundle.js file, the mime type is converted to text/html

I'm currently working on implementing server side rendering for an application using react-redux and express for the server. We are also utilizing webpack to bundle our assets. To get started, I referred to the following documentation: https://redux ...

javascriptexpressreact-reduxserver-side-renderingserverside-javascript

Dealing with VueJS - Sharing an array of data from a child to a parent component using v-model

I am facing an issue in emitting data (array) from a child component to a parent component using v-model. However, when the parent component is created, my console.log does not work. I am hesitant to work with Vuex as I am still a beginner. Here is my chi ...

javascriptvue.jsevents

Trying to access the label attribute of a select option in Vue.js?

Looking to retrieve the name attribute of a selected option in Vuejs. After experimenting with the value attribute, I found that it worked successfully. Below is the code I used: Tested code: <select id="countryselect" name="country" @change="onChange ...

javascriptvue.js

How to update an Angular 2 component using a shared service

My question is regarding updating components in Angular 4. The layout of my page is as follows: Product Component Product Filter Component Product List Component I am looking to link the Product Filter and Product List components so that when a user c ...

angulartypescript

How does the keyof operator fetch non-enumerable inherited properties from an object literal type?

Take a look at this TypeScript code: 'use strict'; type Value = 1 | 2 ; type Owner = 'ownerA' | 'ownerB'; type ItemType = 'itemTypeA' | 'itemTypeB'; type Item = { type: ItemType; owner: Owner; value: ...

javascripttypescripttypestypeerrorjavascript-objects

The straightforward onclick action only functioned once

Looking for assistance: Can someone explain why this code snippet isn't functioning properly? It seems that the increment is only happening once. var player = document.getElementById("player"); var button = document.getElementById("button"); functio ...

javascripthtmlcssdom

Ways to address time discrepancies when the countdown skips ahead with each button click (or initiate a countdown reset upon each click)

Every time I click my countdown button, the timer runs normally once. But if I keep clicking it multiple times, it starts skipping time. Here are my codes: <input type="submit" value="Countdown" id="countdown" onclick="countdown_init()" /> <div i ...

javascripthtmlbuttoncountdown

The connection between ng-model and ng-repeat, and the comprehension of $scope

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="customersCtrl"> <ul& ...

javascriptangularjs

What is the best way to trigger a refresh in Next.js React component?

Current Tech Stack Versions Next.js : 14.0.3 React : 18.0.2 // TestClientComponent.tsx "use client"; import { IResident } from "@interface/resident.types"; import { getResidents } from "@models/resident.service"; import { So ...

javascriptreactjsnext.js