Как настроить babel для реакции-реле (классика) на реактив-родной 0.57+ - PullRequest
Новая
       11

Как настроить babel для реакции-реле (классика) на реактив-родной 0.57+

0 голосов
/ 24 января 2019

Я пытаюсь обновить реагировать на наше приложение с 0.52.0 до последней версии с 4 января.

До 0.55.0 все шло нормально (были некоторые проблемы с 0.56.0, из-за чего реактив-native-router-flux были несовместимы), но при попытке перейти на 0.57.0 все перестало работать.

После исправления всех остальных ошибок, независимо от того, что я делаю, я получаю эту ошибку:

Нарушение инварианта: RelayQL: Неожиданный вызов во время выполнения. Либо преобразование Бабеля не было настроено, либо не удалось определить этот сайт вызова. Убедитесь, что он дословно используется как `Relay.QL`.

Эта ошибка находится по адресу:
в RelayRenderer (на TabIcon.js: 77)
в TabIcon (at navigationStore.js: 245)
в RCTView (на View.js: 44)
в анимированном компоненте (at CrossFadeIcon.js: 34)
в RCTView (на View.js: 44)
в TabBarIcon (на BottomTabBar.js: 142)
... и т. д.

(Кстати: в этом конкретном контейнере-ретранслято нет ничего особенного; какой-либо контейнер, обернутый Relay.Renderer, будет вызван первым, завершится с той же ошибкой.)

Поскольку мой код определенно использует дословно Relay.QL в соответствующем коде, очевидно, проблема заключается в том, что преобразование babel не работает.

Старый .babelrc, который работал, по крайней мере, до реактивной версии 0.55.0: 

{
  "presets": [
    "react-native",
    {
      "plugins": ["custom-relay"]
    }
  ]
}

custom-relay - это небольшой скрипт, который предыдущий разработчик скопировал откуда-то: 

const getBabelRelayPlugin = require('babel-relay-plugin');
const schema = require('../../schema.json');

module.exports = getBabelRelayPlugin(schema.data);

После нескольких дней ругательства я понял, что, хотя документация и скрипт react-native-git-upgrade говорят мне обновить файл .babelrc; похоже, что этот файл полностью игнорируется, поэтому, когда я вместо этого перенес конфигурацию в файл babel.config.js, по крайней мере, я начал получать новые ошибки, указывающие, что этот файл использовался.

Оказалось, что скрипт нестандартной ретрансляции невозможно перевести в нечто, совместимое с babel 7, поскольку устаревший babel-relay-plugin не работает с babel 7, а babel-plugin-relay не экспортирует правильные методы; кроме того, он должен работать без него сейчас.

Мой текущий babel.config.js: 

module.exports = function babelconfig(api) {
  api.cache(false);
  return {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
      ['relay', { compat: true, schema: 'schema.json' }],
      '@babel/transform-runtime',
    ],
  };
};

Я также изменил файл .babelrc, чтобы сказать то же самое (только в синтаксисе JSON), но это не помогает.

Поиск по этой проблеме до сих пор был бесплодным, единственные проблемы и SO вопросы, которые я обнаружил, по-видимому, связаны со старыми версиями реагировать-нативно (или просто реагировать), а решения, как правило, являются вариантами старого .babelrc Конфигурация, которая больше не работает, например ( 2206 , 1202 , 2025 , 1899 ). И я не смог найти ни одного примера конфигурации babel, в котором бы использовались бы реактивная версия 0.57.0 и синтаксис babel 7, а также response-relay.

Однажды я нашел сообщение или проблему на форуме, где кто-то упомянул что-то, указывающее на то, что миграция с Relay Classic на Relay Modern будет работать; но я не могу вспомнить, где я его нашел; и поскольку эта миграция сама по себе является масштабным мероприятием, я не очень хочу начать это делать, просто чтобы обнаружить, что сообщение об ошибке просто изменяется с RelayQL: Unexpected invocation at runtime. на graphql: Unexpected invocation at runtime.

Но если кто-то может подтвердить (с помощью источников), что реактивная версия 0.57+ или babel 7 определенно несовместимы с классическим синтаксисом реле, и что переход на современную версию решит все мои проблемы; конечно я сделаю так.

1 Ответ

0 голосов
/ 25 января 2019

Я понял это сам ... Кажется, проблема была вызвана неполной документацией о том, как использовать Relay Classic с более новыми версиями. Я создал проблему для этого здесь .

Если у вас та же проблема, что и у меня, вы, вероятно, также используете «неправильное» имя переменной Relay вместо RelayClassic при импорте из react-relay/classic, как я.

Я изменил: 

import Relay from 'react-relay/classic';
//...
fragments: {
      viewer: () => Relay.QL`

до 

import RelayClassic from 'react-relay/classic';
//...
fragments: {
      viewer: () => RelayClassic.QL`

везде. И вдруг это снова заработало.

...