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

Posted 2023-03-08

【中文标题】使用 babel7 时，forwardRef 不是 buildReactRelayContainer 的函数

【英文标题】：forwardRef is not a function at buildReactRelayContainer when using babel7

【发布时间】：2019-03-11 12:54:26

【问题描述】：

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

webpack 包构建成功。

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

webpack_require(...).forwardRef 不是函数 在 buildReactRelayContainer

我正在使用 webpack 3.12.0

并且在dev依赖中有babel-plugin-relay，并设置在.babelrc的插件顶部，设置在webpack的插件列表顶部。

请注意，现阶段我无法升级到 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"
  ]

网页包

...
  
    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"
            ]
          
        ]
      
    
  ,
...

【参考方案1】：

您正在尝试将不能很好地组合在一起的东西混合在一起。你最好升级到最新版本的 React (16.6~) 和最新版本的 webpack (4.3.0)。他们将与 Babel 7 一起玩得很好。这将是一个巨大的变化，但值得更新！我目前正在更新我去年创建的 React 工作流，它最初使用 webpack 3.6、Babel 6+ 和 React https://github.com/interglobalmedia/react-workflow-updated-2018 更新尚未完成，但如果您愿意，可以关注我的进度！应该很快就完成了！

【讨论】：

在此处发表评论以阐明 OP 的解决方案。分叉并升级了一个卡在 React 15 -> React 16.5.2 上的包。这启用了对 React 16.5.2 的升级。进一步调查导致使用 webpack-cli 3.1.2 将 webpack 升级到 4.23.1。