Apollo-link: zen-observable import прерывает запросы в apollo-client при переносе

Созданный на 15 нояб. 2017  ·  34Комментарии  ·  Источник: apollographql/apollo-link

Спасибо за сообщение о проблеме по Apollo Link! Убедитесь, что вы включили следующую информацию, чтобы решить проблему. Если вы подаете запрос на добавление функции, вам не нужно следовать приведенной ниже схеме, но, пожалуйста, включите «идею функции» в заголовок и укажите конкретный пример, в котором эта функция будет полезна.

Всем привет!

Я работаю над созданием нового проекта с Apollo Client, Apollo Link, babel и webpack. Я использую довольно простой шаблон проекта, чтобы настроить его с задокументированными предложениями в Apollo Client. Когда я запускаю его и отправляю запрос, я получаю исключение времени выполнения, и запросы не могут проходить. Я проследил это до того, как импортируется пакет zen-observable .

Предполагаемый результат:

Клиент Apollo может сделать запрос с помощью 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 импортирует Observable из проекта Apollo Link, который импортирует его из пакета zen-observable . При переносе в JavaScript пакет apollo-link имеет это по адресу lib/index.js :

import * as Observable from 'zen-observable';
export { Observable };

Кажется, что это вызывает странный случай при транспиляции и последующем создании подкласса этого Observable, но, похоже, именно здесь метод call перестает быть доступным из-за моего расследования.

Как воспроизвести проблему:

Прилагается тестовый проект, который должен продемонстрировать проблему. Я предполагаю, что Node.js v6 или v8 установлен с Yarn. Тестовый проект

  1. Разархивируйте и cd в тестовый проект
  2. yarn install
  3. yarn run start и откройте http: // localhost : 3000 /
  4. Вы должны увидеть ошибку, показанную выше, в консоли.

Вы можете обойти это, изменив node_modules/apollo-link/lib/index.js:3 с:

import * as Observable from 'zen-observable';

к:

import Observable from 'zen-observable';

Проблема в том, что если вы внесете это изменение в соответствующий файл .ts, это приведет к сбою линтинга, и я не уверен, как лучше всего это решить.

В StackOverflow есть эта проблема возникает у других людей.

Большое спасибо за ваше время, за просмотр моего отчета об ошибке и за отличную работу над Apollo!

Самый полезный комментарий

Я так борюсь, что у меня нет другого выбора, кроме как использовать следующий прием, чтобы обойти эту проблему ...

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. Не уверен, что это причина, по которой он сломался для меня

Все 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
импорт 'isomorphic-fetch'
import * как apolloLink из 'apollo-link'
import Observable из 'zen-observable'
apolloLink.Observable = Наблюдаемый
`` ''

@stevestreza @mizchi какие версии apollo-client и apollo-link вы используете?

Та же проблема здесь, с [email protected] в проекте webpack, исправлена ​​удалением * as в операторе импорта, как указал @stevestreza .

Здесь та же проблема.

То же самое и здесь, и я хотел бы добавить, что проблема не в Webpack, как написано на SO, а в Apollo и / или TypeScript.

Причина, по которой я знаю, заключается в том, что я использую Rollup для создания пакета вместо Webpack.

Я думаю, что это ошибка TypeScript + Rollup, но я удивлен, что она не проявляется в наших собственных сборках Rollup. Может ли кто-нибудь здесь открыть запрос на перенос с внесением предложенных выше изменений?

Та же проблема и с Rollup. Я тоже не использую Typescript.

Похоже, TS все облажались. Я попытался собрать модуль для исправления ошибок, но получал ошибки TS.

Привет, прошу прощения, но есть ли у кого-нибудь исправление, пока эта проблема решается? есть идеи, какая была последняя стабильная версия?

в своих исследованиях я думаю, что эта проблема возникает только вне приложения create-react-app. поэтому внутри приложения create-response-app есть неявное предположение, которое не документировано, что вызывает эту проблему _super.call is not a function .

Та же проблема, я просто следил за документом о новом проекте и получил эту ошибку. Я не могу продолжать работу с Аполлоном.

просто связывая мою другую проблему здесь: https://github.com/apollographql/apollo-client/issues/2785#issuecomment -354169337, где есть предлагаемое исправление (я не тестировал)

не уверен, связано ли это, но ...

Я использую свертку, чтобы создать пакет для очень простого приложения для реагирования. все работает нормально, пока я не попробую добавить apollo-client в микс ..

следуя документации здесь: https://www.apollographql.com/docs/react/basics/setup.html#installation

после попытки собрать проект с помощью накопительного пакета я получаю следующую ошибку во время сборки:

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: }

ive попытался изменить импорт в node_modules/apollo-link/lib/link.js на import Observable from 'zen-observable'; как было предложено в связанной проблеме выше, но, похоже, это не решило проблему.

У меня проблема с zen-observable, которая совсем другая. пожалуйста, взгляни на
https://github.com/apollographql/apollo-link/issues/389
и предположить, что я делаю что-то не так.

Я так борюсь, что у меня нет другого выбора, кроме как использовать следующий прием, чтобы обойти эту проблему ...

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. Не уверен, что это причина, по которой он сломался для меня

Я получаю ту же ошибку без машинописного текста и могу поручиться за внесение изменений

import * as Observable from 'zen-observable';
к:
import Observable from 'zen-observable';

устраняет проблему

блин @kinyat, я понятия не имел, что вы можете сделать это с помощью webpack. ТИЛЬ !!! Спасибо!!!

Та же проблема в базовом приложении Hello World с react-apollo и parcel-bundler . Любое юридическое решение?

@alapini Я думаю, что одним из "законных" решений для Apollo является предоставление пользователю без машинописного текста (т.е. Babel) версии ES5 от ts-компилятора.

Я использую apollo для своего плагина vuex-orm-apollo, и изменение файлов в node_modules не является для меня жизнеспособным вариантом. Было бы здорово, если бы в ближайшее время исправление ошибки! :)

с последней версией машинописного текста импорт может быть выражен в обычном синтаксисе модулей es, поэтому, возможно, если мы все будем ждать, пока Apollo обновит версию машинописного текста, это будет работать из коробки для нас, не пользователей TS.

Я думаю, что сталкиваюсь с некоторыми из тех же проблем, перечисленных здесь. Первый раз использую apollo, поэтому я не уверен на 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

Для тех, кто использует parcel.js, этот PR кажется временным решением проблемы: https://github.com/parcel-bundler/parcel/pull/530

Я не углублялся в эту проблему, но, похоже, суть проблемы, как отмечает здесь @fathyb , заключается в следующем:

Текущее поведение Babel полностью корректно и соответствует спецификации ES6. Импорт экспорта по умолчанию с подстановочным знаком недопустим, поэтому ошибки здесь допустимы.

Однако люди ( # 418 ) и библиотеки (antd, @ blueprintjs / core и т. Д.) По-прежнему полагаются на это. Идея состоит в том, чтобы быть более терпимым, ослабив спецификацию экзотических пространств имен.

Кажется, что обходной путь, опубликованный * as ), является законным исправлением для apollo-link, не так ли?

Fwiw, я получал ошибку _apolloLink.Observable is not a constructor , и она исчезает, если я использую вышеупомянутый PR parcel.js (или возвращаюсь к parcel.js 1.2.1, как указано в apollo-client / issues / 2785 )

У меня тоже эта проблема с использованием Rollup в проекте Vuejs.

спасибо, что поделился @ tadas412

Приведенный выше PR был опубликован в версии 1.2.0. Сообщите мне, если проблема все еще не решена!

все еще появляется ошибка с 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

У меня работает с 1.2.0.

@littletower Это может показаться глупым, но вы уверены, что используете 1.2.0? Может быть, удалить каталог node_modules и переустановить пакеты? Просто спрашиваю :)

@phortx да, я это уже сделал :(
Могу добавить, что использую подписки, не знаю, меняет ли это что-нибудь

@littletower Это странно. Я получал ту же ошибку с 1.1.0 и 1.2.0, похоже, решил ее. apollo-client имеет зависимость от apollo-link , поэтому может оказаться, что его зависимость не обновилась. Можете ли вы создать репо репродукции?

Изменение определенно устранило реальную проблему на уровне кода, но похоже, что yarn вызывает конфликт.

  • Когда я использую npm install для установки зависимостей, он загружает apollo-link 1.2.0 без каких-либо изменений из apollo-client . Это отлично работает, и проблема, о которой сообщалось, больше не возникает. (Вам нужно вручную установить graphql-tag и удалить фигурные скобки при импорте в src/client/index.js чтобы проверить это)
  • Когда я использую yarn install , устанавливается версия apollo-link 1.0.0. Когда я yarn add apollo-link для явной установки 1.2.0, версия в node_modules/apollo-link становится 1.2.0, но другая версия apollo-link 1.0.0 устанавливается в node_modules/apollo-client/node_modules/apollo-link .

На данный момент я уже не знаю, как yarn работает, чтобы исправить это (я ожидал, что он установил apollo-link 1.2.0, а не 1.0.0). Я предполагаю, что «правильное» исправление - потребовать apollo-link 1.2.0 в package.json для apollo-client . Напишу в apollographql / apollo-client # 2785.

В любом случае, здесь это кажется полностью исправленным!

@evans Я создал репо для воспроизведения и

Я получаю ту же ошибку в проекте 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 Вы нашли какое-нибудь решение? Я столкнулся с той же проблемой.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги