Closed swyxio closed 5 years ago
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?
I am also experiencing this issue in a non-react app. Still Investigating ...
StackTrace on apollo-client@2.1.0
.
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
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)
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';
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.
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.
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?
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.
Might this be related to this issue? --> https://github.com/parcel-bundler/parcel/issues/418
I have the same problem with rollup
Same issue here; comes up in non-react environments
HI! Any progress with this? apollo-client@2.2.0
, same issue.
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
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'
}
},
...
@sw-yx I faced the problem in webpack
@sw-yx webpack setup, ejected from react 16.
@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.
+1
+1
+1
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)
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-")
],
apollo-link
has been updated to 1.2.0, give it a shot.
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.
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)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
.
@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"
}
"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 };
If anyone is still encountering this issue with a modern version of Apollo Client, please let us know. Thanks!
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```
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:How to reproduce the issue: just following the docs at https://www.apollographql.com/docs/react/basics/setup.html
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