In Expo, Requiring module “fetch”, threw an exception: ReferenceError: Can't find variable: self

Question

I have searched across different possible answers, but didn't find any appropriate addressing this specific error.

I have mentioned the exact error string in the question title. This error started appearing when I installed fetch npm module in my ReactNative app. This error appears just at the time app is launched/loaded on my phone during development. Before installing fetch, my app was loading correctly on the phone. In windows CLI there is no such error that assist me to resolve the issue, it just shows the build is successful.

I am using Expo for my ReactNative app development. Please assist in this regard to resolve the issue. Further details can be seen in following attached screen (that shows stack trace):

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"
    }
}

This is a quite strange issue, that when I Uninstall fetch and try to use any other library e.g. axios, the reference to same error (related to fetch module) still appears. I have restarted my laptop machine, and restarted Expo app on mobile as well.

Answer 1

It looks like the issue is produced by the fresh version of whatwg-fetch. The solutions, which works for me is explicit adding the older version:

npm i whatwg-fetch@2.0.4 or yarn add whatwg-fetch@2.0.4

Solution taken from here

Answer 2

On my side, the error was triggered each time I shut down and restart the pc (I develop on Ubuntu 16.04 ).

I used an old answer ( 2016 ) which completely fixed the issue:

I added:

global.self = global;

into the main js file.

And everything is back to normal.

expo-cli is at 2.2.4 ( last version )

Answer 3

I think fetch 1.1.0 cannot work well on React Native because React Native use JS core not NodeJS. I prefer you use library axios or built-in 'fetch' of React Native (https://facebook.github.io/react-native/docs/network.html).

npm install axios --save

Example

// 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);
  }
}

or

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
  });  

Answer 4

I have figured it out, basically it was not the npm neither the NPM fetch component issue. Basically after setting up the project I ran npm install expo-cli which message was appearing in CLI when I try to run expo start or npm start. At this time there was new version available v30.x.x, and YES the self reference issue was in older expo version but not in v30.x.x.

After installing expo-cli it was not matching to my existing project expo configuration and installed files, hence I re-setup the project again, which loaded and installed latest version libraries and coppied the project files into it.

And boom! The application ran without any error this time.