В Экспо, запрашивающем модуль "выборка", выдало исключение: ReferenceError: Невозможно найти переменную: self

Question

Я искал разные возможные ответы, но не нашел подходящего решения этой конкретной ошибки.

Я упомянул точную строку ошибки в заголовке вопроса.Эта ошибка начала появляться, когда я установил модуль fetch npm в моем приложении ReactNative.Эта ошибка появляется только тогда, когда приложение запускается / загружается на моем телефоне во время разработки.Перед установкой fetch мое приложение корректно загружалось на телефон.В Windows CLI нет такой ошибки, которая помогает мне решить проблему, она просто показывает, что сборка прошла успешно.

Я использую Expo для разработки моего ReactNative приложения.Пожалуйста, помогите в этом отношении решить проблему.Дополнительные подробности можно увидеть на следующем прилагаемом экране (который показывает трассировку стека):

Package.json

{
    "name": "my-new-project",
    "main": "node_modules/expo/AppEntry.js",
    "private": true,
    "scripts": {
        "start": "expo start",
        "android": "expo start --android",
        "ios": "expo start --ios",
        "eject": "expo eject",
        "test": "node ./node_modules/jest/bin/jest.js --watchAll"
    },
    "jest": {
        "preset": "jest-expo"
    },
    "dependencies": {
        "@expo/samples": "2.1.1",
        "expo": "29.0.0",
        "fetch": "^1.1.0",
        "react": "16.3.1",
        "react-native": "https://github.com/expo/react-native/archive/sdk-29.0.0.tar.gz",
        "react-navigation": "^2.9.3"
    },
    "devDependencies": {
        "jest-expo": "29.0.0"
    }
}

Это довольно странная проблема: когда я удаляю fetch и пытаюсь использовать любую другую библиотеку, например axios, ссылка на ту же ошибку (связанную с модулем выборки) по-прежнему появляется,Я перезапустил свой портативный компьютер и перезапустил приложение Expo на мобильном телефоне.

Answer 1

Похоже, что проблема вызвана новой версией whatwg-fetch.Решения, которые работают для меня, это явное добавление более старой версии:

npm i whatwg-fetch@2.0.4 или yarn add whatwg-fetch@2.0.4

Решение взято из здесь

Answer 2

Я понял это, в основном это не проблема npm и не NPM fetch.В основном после настройки проекта я запустил npm install expo-cli, какое сообщение появлялось в CLI при попытке запустить expo start или npm start.В это время была доступна новая версия v30.x.x, и ДА, ссылка self была в более старой версии expo, но не в v30.x.x.

После установки expo-cli он не соответствовал моей существующей конфигурации проекта expo и установленным файлам, поэтому я заново настроил проект, который загрузил и установил библиотеки последних версий и скопировал в него файлы проекта.

И бум!На этот раз приложение работало без ошибок.

Answer 3

Со своей стороны, ошибка возникала каждый раз, когда я выключал и перезагружал компьютер (я разрабатываю на Ubuntu 16.04).

Я использовал старый ответ (2016), который полностью устранил проблему:

Я добавил:

global.self = global;

в основной js файл.

И все вернулось в норму.

expo-cli на 2.2.4 (последняя версия)

Answer 4

Я думаю, что выборка 1.1.0 не может хорошо работать на React Native, потому что React Native использует ядро ​​JS, а не NodeJS.Я предпочитаю использовать библиотеку axios или встроенную 'выборку' React Native (https://facebook.github.io/react-native/docs/network.html).

npm install axios --save

Пример

// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

или

const axios = require('axios');

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

// Optionally the request above could also be done as
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });