babel-relay-плагин с react-native (expo) выдает ошибку о 'cypto'

#react-native #expo #relay #react-relay

#react-native #expo #реле #react-relay

Вопрос:

Я пытаюсь реализовать react-relay в проекте expo, используя пакет babel-plugin-relay. Он работал на expo web ( npm run web ), но когда я запустил его на своем устройстве Android ( npm start ), произошла эта ошибка.

Ошибка

 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

Моя конфигурация

 // 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__/**'
  ],
};

Я использую babel-plugin-relay / макрос для составления фрагментов graphql ( import graphql from "babel-plugin-relay/macro"; ).

Если бы кто-нибудь мог помочь мне решить эту проблему, я был бы очень признателен. Спасибо.

1. Вы это исправили?

2. вроде того. Я думаю, что он только начал работать. Я добавил следующие разработчики babel-plugin-macros, babel-preset-expo, babel-preset-react-native, metro-react-native-babel-preset. хотя не уверен, что все они полностью необходимы. важно добавить «макросы» в список плагинов конфигурации babel. наконец, если вы используете реальное оборудование, я нахожу, что могут быть проблемы с кэшированием. убедитесь, что кэш очищен, чтобы вы получали самый актуальный код. эти изменения плюс то, что у меня есть выше, — это то, что я использую сейчас, и это работает.

3. Спасибо! babel-preset-react-native устарел, но это была проблема с кешем. Добавление макросов, таких как freecodecamp.org/news /… исправил это, но я не знал об этом, так как должен yarn start --reset-cache был, так что действительно есть проблемы с кэшированием