Apollo - React (Typescript) Инвариантная Ошибка при сборке рабочей сборки - PullRequest
Новая
       28

Apollo - React (Typescript) Инвариантная Ошибка при сборке рабочей сборки

1 голос
/ 27 мая 2019

Я создаю новое приложение реагирования с gatsby, typcript и apollo (для запросов graphql).

При тестировании в dev приложение компилируется и запускается без ошибок.

Когда я переносил сборку, используя 'gatsby build', она завершалась с ошибкой.

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

Кажется, это вызвано модулем httplink.Код, который вызывает ошибку при ее наличии в любом файле .tsx: 

import { HttpLink } from 'apollo-link-http'

const link = new HttpLink({
  uri: 'http://localhost:3001/graphql'
})

Показана следующая ошибка: 

error Building static HTML failed

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html

  10 |     function InvariantError(message) {
  11 |         if (message === void 0) { message = genericMessage; }
> 12 |         var _this = _super.call(this, typeof message ===     "number"
     | ^
  13 |             ? genericMessage + ": " + message + " (see    https://github.com/apollographql/invariant-packages)"
  14 |             : message) || this;
  15 |         _this.framesToPop = 1;


  WebpackError: Invariant Violation: Invariant Violation: 1 (see https://github.com/apollographql/invariant-packages)

  - invariant.esm.js:12 new InvariantError
[lib]/[apollo-link-http-common]/[ts-invariant]/lib/invariant.esm.js:12:1

  - bundle.esm.js:64 checkFetcher
[lib]/[apollo-link-http-common]/lib/bundle.esm.js:64:52

  - bundle.esm.js:8 createHttpLink
[lib]/[apollo-link-http]/lib/bundle.esm.js:8:17

  - bundle.esm.js:139 new HttpLink
[lib]/[apollo-link-http]/lib/bundle.esm.js:139:1

  - Strategy.tsx:6 Module../src/components/Strategy.tsx
lib/src/components/Strategy.tsx:6:14

  - bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1


  - bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1

  - sync-requires.js:10 Object../.cache/sync-requires.js
lib/.cache/sync-requires.js:10:56

  - bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1

  - static-entry.js:9 Module../.cache/static-entry.js
lib/.cache/static-entry.js:9:22

  - bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1

  - bootstrap:83
lib/webpack/bootstrap:83:1


  - universalModuleDefinition:3 webpackUniversalModuleDefinition
lib/webpack/universalModuleDefinition:3:1

  - universalModuleDefinition:10 Object.<anonymous>
lib/webpack/universalModuleDefinition:10:2"

Isэта проблема с машинописью, проблема с Гэтсби, проблема с Аполлоном или проблема с веб-пакетом?Или комбинация?

Спасибо за любую помощь, которую вы можете оказать!Я борюсь со своим пониманием всех частей здесь.

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

Я попытался добавить следующую конфигурацию в gatsby-node.js, чтобы игнорировать проверки модуля (как предложено здесь: https://gatsby.dev/debug-html),, но безуспешноbuild, хотя ошибка не изменилась, так как он не мог видеть модуль. 

  exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
    if (stage === "build-html") {
      actions.setWebpackConfig({
        module: {
          rules: [
            {
              test: /apollo-link-http/,
              use: loaders.null(),
            },
          ],
        },
      })
    }
  }

Напомним, что это код, предназначенный для создания объекта client, чтобы разрешить запросы к конечной точке graphql. При запуске gatsbybuild 'происходит ошибка варианта (см. выше). 

  import * as React from 'react'
  import { ApolloClient } from 'apollo-client'
  import { InMemoryCache } from 'apollo-cache-inmemory'
  import { HttpLink } from 'apollo-link-http'

  const cache = new InMemoryCache()
  const link = new HttpLink({
    uri: 'http://localhost:3001/graphql'
  })

  const client = new ApolloClient({
    cache,
    link
  })

1 Ответ

2 голосов
/ 31 мая 2019

Я новичок в этом.После нескольких часов поисков я наконец-то отследил ошибку в файле.При ближайшем рассмотрении, когда среда является производственной (process.env.NODE_ENV === "production"), ошибка не будет подробно описана.Поэтому я посмотрел на ошибку, если среда была чем-то другим, и изменил файл, чтобы вывести его на консоль.Я получил ответ: 

fetch is not found globally and no fetcher passed, to fix pass a fetch for
your environment like https://www.npmjs.com/package/node-fetch.

For example:
import fetch from 'node-fetch';
import { createHttpLink } from 'apollo-link-http';

const link = createHttpLink({ uri: '/graphql', fetch: fetch });

Я добавил fetch в свой код, и он создал рабочую версию без ошибок.

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

Проблема исправлена.

...