Apollo-link: zen-observable 导入在转译时中断了 apollo-client 中的查询
感谢您在 Apollo Link 上提交问题！ 请确保您包含以下信息，以确保您的问题是可操作的。 如果您要提交功能请求，则无需遵循以下大纲，但请在标题中包含“功能创意”，并提供该功能有用的具体示例。
你好呀！
我正在努力使用 Apollo Client、Apollo Link、babel 和 webpack 设置一个新项目。 我使用一个非常简单的项目模板来设置它，其中包含 Apollo Client 中记录的建议。 当我去运行它并向它发送一个查询时，我收到一个运行时异常并且查询无法通过。 我追踪到zen-observable包是如何导入的。
预期结果：
Apollo Client 可以使用 Apollo Link 进行查询，使用以下代码：
import { ApolloClient } from "apollo-client"
import { HttpLink } from "apollo-link-http"
import { InMemoryCache } from "apollo-cache-inmemory"
import { gql } from "graphql-tag"
const graphqlClient = new ApolloClient({
link: new HttpLink(),
cache: new InMemoryCache(),
})
graphqlClient.query({ query: gql`query { counter { count } }` })
.then(console.log)
.catch(console.error)
实际结果：
Apollo 客户端抛出以下异常：
TypeError: _super.call is not a function
Stack trace:
ObservableQuery@webpack-internal:///16:56:21
QueryManager</QueryManager.prototype.watchQuery@webpack-internal:///94:404:16
QueryManager</QueryManager.prototype.query/resPromise<@webpack-internal:///94:431:20
QueryManager</QueryManager.prototype.query@webpack-internal:///94:429:26
ApolloClient</ApolloClient.prototype.query@webpack-internal:///93:102:16
@webpack-internal:///59:14:1
[59]<strong i="19">@http</strong>://host/assets/client.js:16:1
__webpack_require__<strong i="20">@http</strong>://host/assets/manifest.js:713:12
fn<strong i="21">@http</strong>://host/assets/manifest.js:118:20
[49]<strong i="22">@http</strong>://host/assets/client.js:7:18
__webpack_require__<strong i="23">@http</strong>://host/assets/manifest.js:713:12
webpackJsonpCallback<strong i="24">@http</strong>://host/assets/manifest.js:26:23
<strong i="25">@http</strong>://host/assets/client.js:1:1
ObservableQuery从 Apollo Link 项目中导入Observable ，后者从zen-observable包中导入。 当转换为 JavaScript 时， apollo-link 包在lib/index.js有这个：
import * as Observable from 'zen-observable';
export { Observable };
似乎这在转译和稍后继承这个 Observable 时会导致一些奇怪的情况，但这似乎是call方法在我的调查中不再可用的地方。
如何重现问题：
附件是一个测试项目，它应该证明这个问题。 我假设 Node.js v6 或 v8 与 Yarn 一起安装。 测试项目
- 解压并cd到测试项目中
yarn installyarn run start并打开http://localhost :3000/- 您应该会在控制台中看到上面显示的错误。
您可以通过从以下位置更改node_modules/apollo-link/lib/index.js:3来解决此问题：
import * as Observable from 'zen-observable';
到：
import Observable from 'zen-observable';
问题是，如果您在相应的 .ts 文件中进行此更改，则会导致 linting 失败，我不确定如何最好地解决该问题。
非常感谢您抽出时间查看我的错误报告以及在 Apollo 上所做的出色工作！
stevestreza
所有34条评论
我有同样的问题，但有不同的错误。
我的代码在这里。
import 'isomorphic-fetch'
import { ApolloLink } from 'apollo-link'
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
export default new ApolloClient({
link: new HttpLink({ uri: 'http://localhost:5000/api/graphql' }),
cache: new InMemoryCache()
})
Uncaught (in promise) TypeError: _apolloLink.Observable is not a constructor
at HttpLink.eval [as request] (httpLink.js:98)
at eval (link.js:60)
at ApolloLink.eval [as request] (ApolloClient.js:30)
at ApolloLink.eval [as request] (link.js:59)
at execute (link.js:94)
at eval (QueryManager.js:134)
at new Promise (<anonymous>)
at QueryManager.mutate (QueryManager.js:129)
at ApolloClient.mutate (ApolloClient.js:109)
at Header.componentDidMount (index.js:53)
我在周围尝试了这项工作，但在
```js
导入“同构获取”
从 'apollo-link' 导入 * 作为 apolloLink
从 'zen-observable' 导入 Observable
apolloLink.Observable = 可观察
````
mizchi
于 2017-11-26
@stevestreza @mizchi你使用的是什么版本的 apollo-client 和 apollo-link？
jbaxleyiii
于 2017-11-29
这里同样的问题，与[email protected]中的WebPack项目，固定通过删除* as在import语句，如@stevestreza指出。
tensor5
于 2017-11-30
同样的问题在这里。
pselden
于 2017-12-04
同样在这里，并且想添加问题不在 Webpack 中，如 SO 上所写，而是在 Apollo 和/或 TypeScript 中。
我知道的原因是我使用 Rollup 来创建一个包而不是 Webpack。
mindcrash
于 2017-12-05
我认为这是一个 TypeScript + Rollup 错误，但我很惊讶它没有出现在我们自己的 Rollup 版本中。 这里有人愿意打开拉取请求进行上面建议的更改吗？
jbaxleyiii
于 2017-12-08
Rollup 也有同样的问题。 我也没有使用 Typescript。
ghost
于 2017-12-08
看起来TS都搞砸了。 我尝试构建模块来修复错误，但遇到了 TS 错误。
ghost
于 2017-12-08
您好，请原谅我的问题，但在解决此问题时有人有修补程序吗？ 知道上一个稳定版本是什么吗？
sw-yx
于 2017-12-27
在我到目前为止的调查中，我认为这个问题只发生在 create-react-app 之外。 所以在 create-react-app 中有一些隐含的假设没有被记录在案，导致这个_super.call is not a function问题。
sw-yx
于 2017-12-27
同样的问题，我只是在一个全新的项目上遵循了文档并得到了这个错误。 我无法继续使用阿波罗。
OwlyCode
于 2017-12-28
只是在这里链接我的另一个问题： https :
sw-yx
于 2017-12-29
不确定这是否相关，但是...
我正在使用汇总为一个非常简单的反应应用程序创建一个包。 一切正常，直到我尝试将 apollo-client 引入组合中。
遵循此处的文档： https :
在尝试使用汇总构建项目后，我在构建过程中收到以下错误：
of is not exported by node_modules/zen-observable/index.js
47: return new ApolloLink(function (operation, forward) {
48: return (firstLink.request(operation, function (op) {
49: return nextLink.request(op, forward) || Observable.of();
^
50: }) || Observable.of());
51: });
node_modules/apollo-link/lib/link.js
of is not exported by node_modules/zen-observable/index.js
48: return (firstLink.request(operation, function (op) {
49: return nextLink.request(op, forward) || Observable.of();
50: }) || Observable.of());
^
51: });
52: }
node_modules/apollo-link/lib/link.js
of is not exported by node_modules/zen-observable/index.js
74: export { ApolloLink };
75: export function execute(link, operation) {
76: return (link.request(createOperation(operation.context, transformOperation(validateOperation(operation)))) || Observable.of());
^
77: }
我尝试按照上述相关问题中的建议将node_modules/apollo-link/lib/link.js的导入更改为import Observable from 'zen-observable'; ，但它似乎没有解决问题。
stringbeans
于 2017-12-31
我面临着 zen-observable 的一个问题，这是完全不同的。 请看看
https://github.com/apollographql/apollo-link/issues/389
并建议我是否做错了什么。
VrajSolanki
于 2018-01-05
我很挣扎，我别无选择，只能使用以下 hack 来解决这个问题......
webpack.config.js
{
test: /node_modules\/apollo-link.*?\/lib\/.*?.js/,
loader: 'string-replace-loader',
options: {
search: 'exports.Observable = Observable',
replace: 'exports.Observable = Observable.default'
}
},
我真的希望我能在这里得到一些帮助，这样我就可以删除这个黑客......
PS 我不使用 TypeScript 而只是 babel。 不知道这是否是它被我破坏的原因
kinyat
于 2018-01-06
我在没有打字稿的情况下遇到了同样的错误，我可以保证做出改变
import * as Observable from 'zen-observable';
到：
import Observable from 'zen-observable';
解决问题
SaraVieira
于 2018-01-06
该死的@kinyat我不知道你可以用 webpack 做到这一点。 直到！！！ 谢谢你！！！
sw-yx
于 2018-01-07
在带有react-apollo和parcel-bundler的基本 Hello World 应用程序中存在相同问题。 有什么法律解决办法吗？
alapini
于 2018-01-16
@alapini我认为“合法”解决方案之一是 Apollo 为非打字稿用户（即 Babel）提供来自 ts 编译器的 ES5 版本。
kinyat
于 2018-01-19
我将 apollo 用于我的vuex-orm-apollo 插件，并且更改node_modules文件对我来说不是一个可行的选择。 很快的错误修复会非常好！ :)
phortx
于 2018-02-07
使用最新版本的打字稿，导入可以用正常的 es 模块语法表示，所以也许如果我们都等待 Apollo 升级打字稿版本，这对我们非 TS 用户来说是开箱即用的。
sw-yx
于 2018-02-07
我想我遇到了这里列出的一些相同的问题。 第一次使用阿波罗，所以我不能 100% 确定我是否正确连接。 我在 inferno 中使用没有打字稿的汇总。
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
'of' is not exported by 'node_modules/zen-observable/index.js'
'of' is not exported by 'node_modules/zen-observable/index.js'
'of' is not exported by 'node_modules/zen-observable/index.js'
(node:37350) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: 'print' is not exported by node_modules/graphql/language/printer.js
(node:37350) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code
michaelwilcox
于 2018-02-13
对于那些使用 parcel.js 的人，这个 PR 似乎可以临时解决这个问题： https :
我还没有深入研究这个问题，但正如@fathyb在这里指出的那样，问题的核心似乎是：
Babel 当前的行为是完全正确的，并且符合 ES6 规范。 使用通配符导入默认导出是非法的，因此这里的错误是合法的。
但是，人们（ #418 ）和库（antd、@blueprintjs/core 等）仍然依赖于此。 这个想法是通过放宽对异国命名空间的规范来更加宽容。
因此， @stevestreza发布的解决方法（删除* as ）似乎是对 apollo-link 的合法修复，不是吗？
Fwiw，我收到了_apolloLink.Observable is not a constructor错误，如果我使用上面提到的parcel.js PR（或恢复到parcel.js 1.2.1，如apollo-client/issues/2785 中所述），它就会消失
tadasant
于 2018-02-13
我在 Vuejs 项目中使用 Rollup 也遇到了这个问题。
stefanoTron
于 2018-02-14
感谢分享@tadas412
sw-yx
于 2018-02-14
上述 PR 发布于 1.2.0。 如果仍然没有解决，请告诉我！
evans
于 2018-02-20
1.2.0 仍然出现错误😢
TypeError: _super.call is not a function
at new ObservableQuery
at QueryManager.watchQuery
at eval
at new Promise
at QueryManager.query
at ApolloClient.query
at VueComponent.created
这似乎也在这里跟踪 apollographql/apollo-client/issues/2785
stefanoTron
于 2018-02-21
对我来说，它适用于 1.2.0。
@littletower这听起来可能很愚蠢，但是您确定使用的是 1.2.0 吗？ 也许删除 node_modules 目录并重新安装软件包？ 只是问问而已 ：）
phortx
于 2018-02-21
@phortx是的，我已经这样做了:(
我可能会补充说我正在使用订阅，不知道这是否会改变任何东西
stefanoTron
于 2018-02-21
@littletower这很奇怪。 我在 1.1.0 中遇到了同样的错误，1.2.0 似乎解决了它。 apollo-client依赖于apollo-link ，所以可能是它的依赖没有更新。 你能创建一个复制回购吗？
evans
于 2018-02-21
该更改确实解决了实际的代码级问题，但看起来yarn引起了冲突。
- 当我使用
npm install安装依赖项时，它会加载apollo-link1.2.0 而不对apollo-client进行任何更改。 这很好用，报告的问题不再发生。 （您必须手动安装graphql-tag并删除src/client/index.js导入中的大括号以验证这一点） - 当我使用
yarn install，它会安装apollo-link1.0.0 版本。 当我yarn add apollo-link显式安装1.2.0时，node_modules/apollo-link版本变成了1.2.0，但是apollo-link1.0.0的另一个版本安装在node_modules/apollo-client/node_modules/apollo-link.
在这一点上，我已经不知道纱线如何解决这个问题（我希望它安装了apollo-link 1.2.0，而不是 1.0.0）。 我猜想“正确”的解决方法是在 package.json 中为apollo-client要求apollo-link 1.2.0 。 我将在 apollographql/apollo-client#2785 中添加一个注释。
不管怎样，这似乎完全固定在这里！
stevestreza
于 2018-02-22
@evans我创建了一个用于复制的存储库，你猜怎么着？ 我没有遇到这个问题，但在我的原始代码中我仍然这样做......我会进一步调查。 感谢您的反馈！
stefanoTron
于 2018-02-22
我在 Polymer 3 项目和apollo-boost遇到相同的错误：
import { HttpLink } from 'apollo-link-http';
原因
Uncaught SyntaxError: The requested module '../../zen-observable/index.js'
does not provide an export named 'default'
heruan
于 2018-06-11
@heruan您找到任何解决方案了吗？ 我面临同样的问题。
hashamhabib
于 2019-02-24
相关问题
ChenRoth
·
4评论
valerybugakov
·
5评论
zsolt-dev
·
4评论
Nickersoft
·
3评论
tim-soft
·
4评论
最有用的评论
我很挣扎，我别无选择，只能使用以下 hack 来解决这个问题......
webpack.config.js
我真的希望我能在这里得到一些帮助，这样我就可以删除这个黑客......
PS 我不使用 TypeScript 而只是 babel。 不知道这是否是它被我破坏的原因