Apollo-client: TypeError: _super.call is not a function

[sw-yx]

Intended outcome:
Trying to get the basic react + apollo setup from the docs going

Actual outcome:
opaque error saying TypeError: _super.call is not a function. Full stack trace is here:

Uncaught (in promise) TypeError: _super.call is not a function
    at new ObservableQuery (b1f6a7d9f98d979758232d0dc3c394ce.js:26213)
    at QueryManager.watchQuery (b1f6a7d9f98d979758232d0dc3c394ce.js:27305)
    at b1f6a7d9f98d979758232d0dc3c394ce.js:27332
    at new Promise (<anonymous>)
    at QueryManager.query (b1f6a7d9f98d979758232d0dc3c394ce.js:27330)
    at ApolloClient.query (b1f6a7d9f98d979758232d0dc3c394ce.js:27981)
    at Object.require.2.react (b1f6a7d9f98d979758232d0dc3c394ce.js:29740)
    at newRequire (b1f6a7d9f98d979758232d0dc3c394ce.js:41)
    at require.39 (b1f6a7d9f98d979758232d0dc3c394ce.js:66)
    at b1f6a7d9f98d979758232d0dc3c394ce.js:71

How to reproduce the issue:
just following the docs at https://www.apollographql.com/docs/react/basics/setup.html

import { ApolloClient } from "apollo-client";
import { HttpLink } from "apollo-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";
import gql from "graphql-tag";
const client = new ApolloClient({
  link: new HttpLink({ uri: "https://q80vw8qjp.lp.gql.zone/graphql" }),
  cache: new InMemoryCache()
});
client
  .query({query: gql`{hello}`})
  .then(console.log);

i see related issues here and here but nobody seems to have filed it in this repo yet so here i am doing it.

Version

• [email protected]

[sw-yx]

something i am discovering is that this only works with create-react-app. i was working with my own parcel.js setup and others are working with webpack and facing this issue. anyone have ideas why this is?

[kaseyreed]

I am also experiencing this issue in a non-react app. Still Investigating ...

StackTrace on [email protected].

Uncaught TypeError: _super.call is not a function
    at new ObservableQuery (ObservableQuery.js:36)
    at QueryManager.watchQuery (QueryManager.js:394)

I'm using BatchHttpLink and the InMemoryCache. The latter is being hydrated from the server-side. At first glance, thinking this may be a transpiliation issue with Apollo Client ...

Debugging and breaking at the specific line has this:

var _this = _super.call(this, function (observer) {
            return _this.onSubscribe(observer);
        }) || this;

where _super is the constructor for Observable

[deden]

Same issue here, using parcel.js

Uncaught TypeError: _super.call is not a function
    at new ObservableQuery (56e4fcef047a1203fa124341b127c36b.js:27375)
    at QueryManager.watchQuery (56e4fcef047a1203fa124341b127c36b.js:28467)
    at ApolloClient.watchQuery (56e4fcef047a1203fa124341b127c36b.js:29130)
    at GraphQL.createQuery (56e4fcef047a1203fa124341b127c36b.js:30657)
    at GraphQL.setInitialProps (56e4fcef047a1203fa124341b127c36b.js:30644)
    at GraphQL.componentWillMount (56e4fcef047a1203fa124341b127c36b.js:30500)
    at callComponentWillMount (56e4fcef047a1203fa124341b127c36b.js:10286)
    at mountClassInstance (56e4fcef047a1203fa124341b127c36b.js:10351)
    at updateClassComponent (56e4fcef047a1203fa124341b127c36b.js:11755)
    at beginWork (56e4fcef047a1203fa124341b127c36b.js:12140)

[deden]

Following apollo-link issue #248 , my workaround is by changing node_modules/apollo-link/lib/index.js:3 from:

import * as Observable from 'zen-observable';

to:

import Observable from 'zen-observable';

[emmenko]

something i am discovering is that this only works with create-react-app. i was working with my own parcel.js setup

Same facing problem. It works with CRA but as I was trying it out with parcel it breaks.

[badenkov]

I'm using parcel-bundler and facing the same problem. I noticed it works fine with parcel-bundler = 1.2.1, and doesn't for parcel-bundler >= 1.3.0.

[sw-yx]

so at this point i think its clear we have some symptoms but no idea as to the cause. is it a rollup issue or is it a parcel issue?

[emmenko]

I noticed it works fine with parcel-bundler = 1.2.1, and doesn't for parcel-bundler >= 1.3.0.

Correct, I just tried with version 1.2.1 of parcel-bundler and it works.

If it's a parcel issue I guess we should move the issue over there.

[emmenko]

Might this be related to this issue? --> https://github.com/parcel-bundler/parcel/issues/418

[rpadovani]

I have the same problem with rollup

[Amit-A]

Same issue here; comes up in non-react environments

[longuniquename]

HI! Any progress with this? [email protected], same issue.

[sw-yx]

as far as I am concerned this is wholly a parcel-bundler issue. i have not yet encountered this in webpack or other setups. please comment if you are facing this but NOT with parcel-bundler. we dont want to blame the wrong folks for the problem.z

EDIT: ok webpack fix is below but parcel has no fix. please no more +1's I am muting this

[Amit-A]

Adding this string replace loader to my webpack config fixed the problem for me:

...
module: {
    rules: [
      {
        test: /node_modules\/apollo-link.*?\/lib\/.*?.js/,
        loader: 'string-replace-loader',
        options: {
          search: 'exports.Observable = Observable',
          replace: 'exports.Observable = Observable.default'
        }
      },
...

[Amit-A]

@sw-yx I faced the problem in webpack

[longuniquename]

@sw-yx webpack setup, ejected from react 16.

[kinyat]

@sw-yx No parcel-bundler to me. The issue is that I am using babel not typescript and the js version of apollo-link is using the wrong import (From babel point of view). I suggest apollo to provide a compiled ES5 version from the ts complier to resolve this issue.

[jnreynoso]

+1

[stefanoTron]

+1

[cruhl]

+1

[chucksellick]

I am getting this in webpack also. It's a customised webpack config originally ejected from create-react-app; it is largely still vanilla. I tried the workaround with string-replace-loader but this did not work for me, although I get a slightly different error now:

utils.js:225 uncaught at r at r 
 at u 
 TypeError: e.call is not a function
    at new t (http://localhost:3001/static/js/main.c3d42256.js:1:82174)
    at e.watchQuery (http://localhost:3001/static/js/main.c3d42256.js:1:549326)
    at http://localhost:3001/static/js/main.c3d42256.js:1:550136
    at new Promise (<anonymous>)
    at e.query (http://localhost:3001/static/js/main.c3d42256.js:1:550069)
    at e.query (http://localhost:3001/static/js/main.c3d42256.js:1:540478)
    at http://localhost:3001/static/js/main.c3d42256.js:1:254196
    at o (http://localhost:3001/static/js/main.c3d42256.js:1:632668)
    at Generator._invoke (http://localhost:3001/static/js/main.c3d42256.js:1:633747)
    at Generator.e.(anonymous function) [as next] (http://localhost:3001/static/js/main.c3d42256.js:1:632847)

[chucksellick]

I finally worked around it by adding the following to my babel rule in webpack config to exclude all apollo-* libraries from being processed:

                        exclude: [
                            pathUtil.resolve(paths.appNodeModules, "apollo-")
                        ],

[stefanoTron]

apollo-link has been updated to 1.2.0, give it a shot.

[stevestreza]

As I noted in apollographql/apollo-link#248, the underlying issue is fixed in apollo-link, but when installing using yarn, there is an issue, which you can see in the test project that was attached to that issue.

• When I use npm install to install the dependencies, it loads apollo-link 1.2.0 without any change from apollo-client. This works great and the reported issue no longer happens. (You have to manually install graphql-tag and remove the braces in the import in src/client/index.js to verify this)
• When I use yarn install, it installs version apollo-link 1.0.0. When I yarn add apollo-link to explicitly install 1.2.0, the version in node_modules/apollo-link becomes 1.2.0, but another version of apollo-link 1.0.0 is installed at node_modules/apollo-client/node_modules/apollo-link.

I'm past my knowledge at this point on how yarn works to fix this (I would expect it to have installed apollo-link 1.2.0, not 1.0.0). I would guess that the "right" fix is to require apollo-link 1.2.0 in the package.json for apollo-client.

[bennypowers]

@sw-yx I have this issue with Rollup.

Repro: rm package-lock.json && npm i && rollup -c

package.json

NOTE: I had to resort to apollo-link and zen-observable forks due to https://github.com/apollographql/apollo-link/issues/558

  "devDependencies": {
    "apollo-cache-inmemory": "^1.1.12",
    "apollo-client": "^2.2.8",
    "apollo-link": "acoreyj/apollo-link#issue-558",
    "apollo-link-batch-http": "^1.2.1",
    "apollo-link-error": "^1.0.7",
    "babel-eslint": "^8.2.2",
    "bower": "^1.8.4",
    "graphql": "^0.13.2",
    "graphql-tag": "^2.8.0",
    "rollup": "^0.57.1",
    "rollup-plugin-commonjs": "^8.4.1",
    "rollup-plugin-node-resolve": "^3.3.0",
    "rollup-plugin-uglify": "^3.0.0",
    "workbox-cli": "^3.0.1",
    "zen-observable-ts": "goldenhelix/zen-observable-ts"
  }

From package-lock.json

    "apollo-link": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/apollo-link/-/apollo-link-1.2.1.tgz",
      "integrity": "sha512-6Ghf+j3cQLCIvjXd2dJrLw+16HZbWbwmB1qlTc41BviB2hv+rK1nJr17Y9dWK0UD4p3i9Hfddx3tthpMKrueHg==",
      "dev": true,
      "requires": {
        "@types/node": "9.6.1",
        "apollo-utilities": "1.0.11",
        "zen-observable-ts": "github:goldenhelix/zen-observable-ts#b6dc9f3f695b2c779c191348f532fbd923ecf586"
      }
    },

rollup.config.js

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

export default {
  input: './src/apollo-client.js',
  output: {
    file: './apollo-client.js',
    format: 'iife',
    name: 'Apollo',
  },
  plugins: [
    resolve({module: true}),
    commonjs(),
  ],
};

src/apollo-client.js

import ApolloClient from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { BatchHttpLink } from 'apollo-link-batch-http';
import { onError } from 'apollo-link-error';
import { ApolloLink } from 'apollo-link';
import gql from 'graphql-tag';

const httpLink = config => new BatchHttpLink(config);

const reportGraphQLError = ({ message, locations, path }) =>
  console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`);

const reportNetworkError = networkError =>
  console.log(`[Network error]: ${networkError}`);

/**
 * Error handling afterware.
 *
 * see https://www.apollographql.com/docs/link/links/error.html
 */
const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) graphQLErrors.forEach(reportGraphQLError);
  if (networkError) reportNetworkError(networkError);
});

const composeLinks = config => ApolloLink.from([
  httpLink(config),
  errorLink,
]);

/**
 * @param {object} config
 * @return {ApolloClient}
 */
const init = config => {
  const link = composeLinks(config);
  const cache = new InMemoryCache().restore(window.__APOLLO_STATE__);
  return !config ? console.error('Trying to initialize an ApolloClient without having a config set')
        : new ApolloClient({ link, cache });
};

const namedClient = {};

export { init, gql, namedClient };

[hwillson]

If anyone is still encountering this issue with a modern version of Apollo Client, please let us know. Thanks!

[victors1681]

I was trying to refactor ApolloClient setup moving the instantiation of new ApolloClient() to a separate file called apollo-client.js for some weird reason it was causing this problem after rename the file to apolloClient.js started working fine. I can't believe it..

Uncaught TypeError: _super.call is not a function at new ObservableQuery