使用 babel7 时，forwardRef 不是 buildReactRelayContainer 的函数

Question

我正在尝试在使用 React 15.6.2 和 Relay 1.6.2 的前端应用程序上升级到 Babel 7

webpack 包构建成功。

但是我在浏览器中收到以下控制台错误。

webpack_require(...).forwardRef is not a function at buildReactRelayContainer

我正在使用 webpack 3.12.0

并且在dev dependencies中有babel-plugin-relay，在.babelrc中设置在plugins的顶部，在webpack中设置在plugins列表的顶部。

请注意，在这个阶段我无法升级到 React 16，因为库使用了 React 15

中已弃用的 propTypes

.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "sourceMaps": true,
  "plugins": [
    "relay",
    "babel-plugin-ramda",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-json-strings",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions",
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-logical-assignment-operators",
    "@babel/plugin-proposal-optional-chaining",
    [
      "@babel/plugin-proposal-pipeline-operator",
      {
        "proposal": "minimal"
      }
    ],
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-do-expressions",
    "@babel/plugin-proposal-function-bind"
  ]
}

webpack

...
  {
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: [
          "@babel/preset-env",
          "@babel/preset-react",
          {
            "plugins": [
              ["relay", {"schema": "./graphql_schema_builds/private/venue/schema.graphql"}],
              "ramda"
            ]
          }
        ]
      }
    }
  },
...

Answer 1

您正在尝试将不能很好地发挥作用的东西混合在一起。你最好升级到最新版本的 React (16.6~) 和最新版本的 webpack (4.3.0)。他们将与 Babel 7 一起玩得很好。这将是一个巨大的变化，但值得更新！我目前正在更新我去年创建的 React 工作流，它最初使用 webpack 3.6、Babel 6+ 和 React < 16.6，但是当我创建一个新的 React 应用程序时，其中添加了 React 16.6~ 以及 webpack 4，我试图用旧的包命名实现 Babel，但没有用。我的 webpack 配置也不起作用。我不得不做出一些重大改变。这是我更新后的 React 工作流程回购 presentation/dlocumentation 的 link： https://github.com/interglobalmedia/react-workflow-updated-2018 更新尚未完成，但如果您愿意，可以关注我的进度！应该很快就完成了！

使用 babel7 时，forwardRef 不是 buildReactRelayContainer 的函数

forwardRef is not a function at buildReactRelayContainer when using babel7

relay

reactjs

webpack

babeljs

graphql

.babelrc

webpack