Question

自1月4日以来，我一直在尝试将我们的应用的react-native从0.52.0升级到最新版本。

直到0.55.0，一切都很好（0.56.0的某些问题导致react-native-router-flux不兼容），但是当尝试达到0.57.0时，一切都停止了工作。

修复所有其他错误后，无论我做什么我都会收到此错误：

不变违反：RelayQL：运行时意外调用。没有建立Babel转换，或者无法识别此呼叫站点。确保将其逐字用作`Relay.QL`。

  该错误位于：
      在RelayRenderer中（在TabIcon.js：77处）
      在TabIcon中（位于navigationStore.js：245）
      在RCTView中（位于View.js：44）
      在AnimatedComponent中（在CrossFadeIcon.js：34处）
      在RCTView中（位于View.js：44）
      在TabBarIcon中（位于BottomTabBar.js：142）
... etc

（顺便说一句：那个特定的中继容器没什么特别的；任何先用Relay.Renderer包装的容器都会失败，并出现相同的错误。）

由于我的代码在相关代码中肯定使用逐字词Relay.QL，因此问题显然是babel转换不起作用。

至少可以工作到本机0.55.0的旧.babelrc：

{
  "presets": [
    "react-native",
    {
      "plugins": ["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-relay-plugin与babel 7不兼容，并且babel-plugin-relay无法导出正确的方法，因此定制中继脚本无法翻译成与babel 7兼容的东西。除此之外，它现在应该可以工作。

我当前的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问题似乎与旧版本的react-native（或仅仅是react）有关，解决方案通常是旧.babelrc的变体不再起作用的配置，例如（2206，1202，2025，1899）。而且我找不到任何使用react-native 0.57.0和babel 7语法以及react-relay的babel配置示例。

我曾经发现一个论坛帖子或问题，有人提到某些内容表明从Relay Classic迁移到Relay Modern是可行的；但是我不记得我在哪里找到的。而且由于此迁移本身是一项艰巨的任务，因此我并不急于开始这样做，只是发现错误消息只是从RelayQL: Unexpected invocation at runtime.变为graphql: Unexpected invocation at runtime。

但是，如果有人可以（与消息来源）确认，本机反应0.57+或babel 7绝对与中继经典语法不兼容，那么迁移到现代将解决我所有的问题；我当然会这样做。

Answer 1

我自己弄清楚了... 似乎该问题是由于有关如何在更高版本中使用Relay Classic的文档不完整引起的。 I've created an issue for this here。

如果您遇到与我相同的问题，那么像我这样从Relay导入时，您可能还会使用“错误的”变量名RelayClassic而不是react-relay/classic。 / p>

我更改了：

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

收件人：

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

无处不在。突然，它又开始工作了。

如何在React-native 0.57 +

1 个答案: