aws-appsync-auth-link: TypeError: Object prototype may only be an Object or null: undefined at setPrototypeOf

[JekRock]

Do you want to request a feature or report a bug? Report a bug

What is the current behavior? After upgrading aws-appsync-auth-link from 2.0.1 to 3.0.7, the following error occurs:

TypeError: Object prototype may only be an Object or null: undefined
        at setPrototypeOf (<anonymous>)

      1 | import fetch from 'node-fetch'
    > 2 | import { createAuthLink } from 'aws-appsync-auth-link'
        | ^
      3 | import {
      4 |   ApolloClient,
      5 |   createHttpLink,

      at extendStatics (node_modules/aws-appsync-auth-link/lib/auth-link.js:7:16)
      at Object.<anonymous>.__extends (node_modules/aws-appsync-auth-link/lib/auth-link.js:10:9)
      at node_modules/aws-appsync-auth-link/lib/auth-link.js:86:5
      at Object.<anonymous> (node_modules/aws-appsync-auth-link/lib/auth-link.js:100:2)
      at Object.<anonymous> (node_modules/aws-appsync-auth-link/lib/index.js:3:19)

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Try using [email protected] as described here but with @apollo/[email protected] It seems like it's the same issue as described in https://github.com/aws-amplify/amplify-js/issues/4859#issuecomment-612459958 I can see that the error happens in exactly the same code but in node_modules/aws-appsync-auth-link/lib/auth-link.js instead of aws-amplify. Maybe it's a shared code that was fixed in aws-amplify in the PR I mentioned, but not in [email protected]

The code where the issue appears:

import fetch from 'node-fetch'
import { createAuthLink } from 'aws-appsync-auth-link'
import {
  ApolloClient,
  createHttpLink,
  InMemoryCache,
  ApolloLink,
} from '@apollo/client'

const getApolloClient = config => {
  const { webAppSync } = config
  const httpLink = createHttpLink({ uri: webAppSync.apiUrl, fetch })

  const link = ApolloLink.from([
    createAuthLink({
      url: webAppSync.apiUrl,
      region: webAppSync.region,
      auth: {
        type: 'API_KEY',
        apiKey: webAppSync.apiKey,
      },
    }),
    httpLink,
  ])

  const isBrowser = typeof window !== 'undefined'

  return new ApolloClient({
    ssrMode: true,
    link,
    cache: new InMemoryCache({}).restore(
      (isBrowser && window.__APOLLO_STATE__) || {}
    ),
  })
}

export default getApolloClient

Here is .babel.rc in case it matters:

{
  "presets": [
    [
      "@babel/env",
      {
        "ignoreBrowserslistConfig": true,
        "modules": false,
        "targets": ["last 2 versions", "ie >= 11"],
        "corejs": 3,
        "useBuiltIns": "usage"
      }
    ],
    "@babel/react",
    "@babel/typescript",
    "@emotion/babel-preset-css-prop"
  ],
  "plugins": [
    [
      "transform-react-remove-prop-types",
      {
        "mode": "wrap",
        "ignoreFilenames": ["node_modules"]
      }
    ],
    "@babel/proposal-class-properties",
    "@babel/syntax-dynamic-import",
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-transform-destructuring",
    "@babel/proposal-object-rest-spread",
    "@loadable/babel-plugin",
    "lodash"
  ],
  "env": {
    "test": {
      "presets": ["@babel/env"],
      "plugins": ["@babel/syntax-dynamic-import"]
    }
  }
}

What is the expected behavior? No error when using [email protected]

Which versions and which environment (browser, react-native, nodejs) / OS are affected by this issue? Did this work in previous versions? It's a React app.