CODEWITHSUNDEEP
reactjswebpackgraphqlbabeljsrelay
alex
alex

Reputation: 5573

forwardRef is not a function at buildReactRelayContainer when using babel7

I am attempting to upgrade to Babel 7, on a front end application using React 15.6.2 and Relay 1.6.2

The webpack bundle builds successfully.

However I get the following console error in the browser.

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

I am using webpack 3.12.0

And have the babel-plugin-relay in dev dependencies, and set at the top of the plugins in .babelrc, and set at the top of the plugins list in webpack.

Note at this stage I cannot upgrade to React 16 due to a library that uses the deprecated propTypes from React 15

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

Upvotes: 1

Views: 3609

Answers (1)

Maria Campbell
Maria Campbell

Reputation: 417

you are trying to mix things together which don't play well together. You are best off upgrading to the latest version of React (16.6~) and the latest version of webpack (4.3.0). They will play well with Babel 7. It will be a drastic change, but worth the updates! I am currently updating a React Workflow I had created last year which originally used webpack 3.6, Babel 6+, and React < 16.6, but when I created a new React Application in which React 16.6~ was added as well as webpack 4, and I tried to implement Babel with old package naming, it did not work. My webpack config did not work either. I had to make some major changes. Here is the link to my updated React workflow repo presentation/dlocumentation: https://github.com/interglobalmedia/react-workflow-updated-2018 The update is not complete yet, but you can follow my progress if you like! It should be completed very soon!

Upvotes: 1

Related Questions