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

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

apollo-client@2.1.0

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 8
Comments: 27 (5 by maintainers)

Most upvoted comments

@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.

kinyat on Jan 19, 2018

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';

deden on Dec 28, 2017

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 on Jan 18, 2018

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.

badenkov on Jan 3, 2018

@sw-yx I faced the problem in webpack

Amit-A on Jan 18, 2018