2

I am trying to implement react-relay in an expo project using the babel-plugin-relay package. It was working on expo web (npm run web), but when I went to run it on my android device (npm start) this error happened.

The Error

The package at "node_modules/babel-plugin-relay/lib/compileGraphQLTag.js" attempted to import the Node standard library module "crypto". It failed because the native React runtime does not include the Node standard library. Read more at https://docs.expo.io/workflow/using-libraries/#using-third-party-libraries

My Configuration

// babel.config.js
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      ['relay']
    ]
  };
};

// package.json
  "dependencies": {
    "@absinthe/socket-relay": "^0.2.1",
    "@expo/vector-icons": "^10.2.1",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/bottom-tabs": "^5.11.1",
    "@react-navigation/native": "^5.8.9",
    "@react-navigation/stack": "^5.12.6",
    "expo": "~39.0.2",
    "expo-asset": "^8.2.0",
    "expo-constants": "^9.2.0",
    "expo-font": "^8.3.0",
    "expo-linking": "^1.0.5",
    "expo-splash-screen": "^0.6.2",
    "expo-status-bar": "~1.0.2",
    "expo-web-browser": "^8.5.0",
    "phoenix": "^1.5.6",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
    "react-native-gesture-handler": "^1.8.0",
    "react-native-paper": "^4.3.1",
    "react-native-safe-area-context": "^3.1.9",
    "react-native-screens": "^2.14.0",
    "react-native-web": "^0.13.18",
    "react-relay": "^10.0.1",
    "relay-runtime": "^10.0.1"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "babel-plugin-relay": "^10.0.1",
    "graphql": "^15.4.0",
    "relay-compiler": "^10.0.1"
  },

// relay.config.js
module.exports = {
  src: './src',
  schema: './schema.graphql',
  exclude: [
    '**/node_modules/**',
    '**/__mocks__/**',
    'src/__generated__/**'
  ],
};

I am using the babel-plugin-relay/macro for composing graphql fragments (import graphql from "babel-plugin-relay/macro";).

If someone could help me resolve this I would really appreciate it. Thanks.

Joey Gough
  • 2,753
  • 2
  • 21
  • 42
  • Did you fix this? – Richard Lindhout Dec 04 '20 at 16:30
  • 1
    kind of. I think it just started working . I added the following dev deps babel-plugin-macros, babel-preset-expo, babel-preset-react-native, metro-react-native-babel-preset. although not sure if they are all completely necessary. importantly add 'macros' to the babel config plugin list. finally if you are using real hardware then i find there can be caching issues. make sure the cache is clear so you are getting the most up to date code. those edits plus what i have above is what i am using now and it works. – Joey Gough Dec 04 '20 at 16:52
  • 2
    Thanks! babel-preset-react-native is deprecated but it was a cache issue. Adding macros like https://www.freecodecamp.org/news/using-babel-macros-with-react-native-8615aaf5b7df/ fixed it, but I didn't know it since I had to `yarn start --reset-cache` so there are indeed caching issues – Richard Lindhout Dec 11 '20 at 14:25

0 Answers0