TypeError: _super.call is not a function #2785

swyxio · 2017-12-27T10:53:01Z

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]

The text was updated successfully, but these errors were encountered:

swyxio · 2017-12-27T11:26:56Z

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 · 2017-12-27T19:58:08Z

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 · 2017-12-28T10:49:04Z

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 · 2017-12-28T11:54:23Z

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 · 2018-01-03T14:11:32Z

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 · 2018-01-03T14:24:16Z

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.

swyxio · 2018-01-03T18:33:01Z

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 · 2018-01-03T21:03:04Z

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 · 2018-01-03T21:22:57Z

Might this be related to this issue? --> parcel-bundler/parcel#418

rpadovani · 2018-01-09T17:05:57Z

I have the same problem with rollup

Amit-A · 2018-01-09T20:36:35Z

Same issue here; comes up in non-react environments

longuniquename · 2018-01-17T14:26:56Z

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

swyxio · 2018-01-18T06:52:18Z

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 · 2018-01-18T15:01:35Z

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 · 2018-01-18T15:03:23Z

@sw-yx I faced the problem in webpack

longuniquename · 2018-01-19T09:00:57Z

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

kinyat · 2018-01-19T15:17:20Z

@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 · 2018-02-11T01:17:08Z

+1

stefanoTron · 2018-02-15T18:18:32Z

+1

cruhl · 2018-02-18T22:13:10Z

+1

chucksellick · 2018-02-20T17:37:23Z

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 · 2018-02-20T17:51:34Z

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 · 2018-02-21T08:31:27Z

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

stevestreza · 2018-02-22T01:20:30Z

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 · 2018-04-02T10:16:17Z

@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 apollographql/apollo-link#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 · 2019-05-16T19:33:46Z

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

victors1681 · 2019-06-07T21:01:57Z

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

   at new ObservableQuery```

swyxio mentioned this issue Dec 29, 2017

zen-observable import breaks queries in apollo-client when transpiled apollographql/apollo-link#248

Closed

emmenko mentioned this issue Jan 3, 2018

Try parceljs instead of CRA emmenko/tourname#20

Closed

stefanoTron mentioned this issue Feb 21, 2018

zen-observable breaks while compiling. apollographql/apollo-link#389

Closed

hwillson closed this as completed May 16, 2019

jfrancos mentioned this issue Dec 21, 2020

_super.call is not a function, with fix aerogear/offix#991

Closed

github-actions bot locked as resolved and limited conversation to collaborators Feb 16, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TypeError: _super.call is not a function #2785

TypeError: _super.call is not a function #2785

swyxio commented Dec 27, 2017

swyxio commented Dec 27, 2017

kaseyreed commented Dec 27, 2017 •

edited

Loading

deden commented Dec 28, 2017

deden commented Dec 28, 2017

emmenko commented Jan 3, 2018

badenkov commented Jan 3, 2018

swyxio commented Jan 3, 2018

emmenko commented Jan 3, 2018 •

edited

Loading

emmenko commented Jan 3, 2018

rpadovani commented Jan 9, 2018

Amit-A commented Jan 9, 2018

longuniquename commented Jan 17, 2018

swyxio commented Jan 18, 2018 •

edited

Loading

Amit-A commented Jan 18, 2018

Amit-A commented Jan 18, 2018

longuniquename commented Jan 19, 2018

kinyat commented Jan 19, 2018 •

edited

Loading

jnreynoso commented Feb 11, 2018

stefanoTron commented Feb 15, 2018

cruhl commented Feb 18, 2018

chucksellick commented Feb 20, 2018

chucksellick commented Feb 20, 2018

stefanoTron commented Feb 21, 2018

stevestreza commented Feb 22, 2018

bennypowers commented Apr 2, 2018 •

edited

Loading

hwillson commented May 16, 2019

victors1681 commented Jun 7, 2019

TypeError: _super.call is not a function #2785

TypeError: _super.call is not a function #2785

Comments

swyxio commented Dec 27, 2017

swyxio commented Dec 27, 2017

kaseyreed commented Dec 27, 2017 • edited Loading

deden commented Dec 28, 2017

deden commented Dec 28, 2017

emmenko commented Jan 3, 2018

badenkov commented Jan 3, 2018

swyxio commented Jan 3, 2018

emmenko commented Jan 3, 2018 • edited Loading

emmenko commented Jan 3, 2018

rpadovani commented Jan 9, 2018

Amit-A commented Jan 9, 2018

longuniquename commented Jan 17, 2018

swyxio commented Jan 18, 2018 • edited Loading

Amit-A commented Jan 18, 2018

Amit-A commented Jan 18, 2018

longuniquename commented Jan 19, 2018

kinyat commented Jan 19, 2018 • edited Loading

jnreynoso commented Feb 11, 2018

stefanoTron commented Feb 15, 2018

cruhl commented Feb 18, 2018

chucksellick commented Feb 20, 2018

chucksellick commented Feb 20, 2018

stefanoTron commented Feb 21, 2018

stevestreza commented Feb 22, 2018

bennypowers commented Apr 2, 2018 • edited Loading

package.json

From package-lock.json

rollup.config.js

src/apollo-client.js

hwillson commented May 16, 2019

victors1681 commented Jun 7, 2019

kaseyreed commented Dec 27, 2017 •

edited

Loading

emmenko commented Jan 3, 2018 •

edited

Loading

swyxio commented Jan 18, 2018 •

edited

Loading

kinyat commented Jan 19, 2018 •

edited

Loading

bennypowers commented Apr 2, 2018 •

edited

Loading

`package.json`

`rollup.config.js`

`src/apollo-client.js`