перекрестная выборка не работает с React Native

Question

Я написал оболочку API, которая использует fetch для выполнения запросов API.Поскольку я предполагаю, что модуль будет совместим с браузерами, Node и React Native, я использую cross-fetch .Теперь, если я тестирую его с помощью Node, он работает отлично, но если я использую обертку в React Native, произойдет сбой со следующей ошибкой: TypeError: undefined is not a function (evaluating 'cross_fetch_1.default(url, init)').Если я печатаю тип cross_fetch_1, я получаю:

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

и "undefined" для cross_fetch_1.default или cross_fetch_1.fetch.

Библиотека была разработана в Typescript, поэтому переменная cross_fetch_1создается компилятором TS.Вы можете найти код Typescript здесь https://github.com/tgamauf/onetimesecret-api/blob/1b8edff66bde11807c8ff7d29030b4d3e6661277/lib/request.ts#L150 и скомпилированный JS здесь https://github.com/tgamauf/onetimesecret-api/blob/1b8edff66bde11807c8ff7d29030b4d3e6661277/lib/request.js#L179.

Насколько я могу судить, я использую модуль так, как он должен использоваться.Что может вызвать это?

Я также открыл проблему github по этому поводу здесь: https://github.com/lquixada/cross-fetch/issues/26

Answer 1

Когда вы импортируете cross-fetch в React Native, упаковщик модуля React Native выбирает node_modules/cross-fetch/dist/browser-ponyfill.js в соответствии с полем browser в node_modules/cross-fetch/package.json;Я считаю, что это настроено здесь .И node_modules/cross-fetch/dist/browser-ponyfill.js предоставляет только экспортное назначение, а не экспорт по умолчанию:

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

Контраст с node_modules/cross-fetch/dist/node-ponyfill.js, который имеет как экспортное назначение, так и экспорт по умолчанию:

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

// Needed for TypeScript.
exports.default = fetch;

Включение опции компилятора esModuleInterop в вашем проекте приведет к тому, что TypeScript исправит разницу и выполнит импорт по умолчанию, используя назначение экспорта.Однако, поскольку node-ponyfill.js ясно предполагает, что авторы cross-fetch намеревались поддерживать потребителей, использующих TypeScript без esModuleInterop, я бы сказал, что им следует исправить browser-ponyfill.js для работы в том же сценарии.Я вижу, вы уже подали вопрос .