阿波罗 - React（Typescript）在构建生产版本时出现不变错误

Question

我正在使用Gatsby、Typescript和Apollo（用于GraphQL查询）创建一个新的React应用程序。

在开发环境中测试时，该应用程序可以编译和运行而不会抛出任何错误。

但是，当我使用“gatsby build”进行转译构建时，会出现错误。

我不明白为什么会触发这个错误，也不知道它是从哪里触发的。似乎与Webpack检查构建方式有关，但我不知道如何定位问题，也没有找到任何清晰的答案。

这个错误似乎是由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"

这是一个TypeScript问题、Gatsby问题、Apollo问题或Webpack问题？或者是它们的组合？

非常感谢，希望你能给我一些帮助！我很难理解所有这些组成部分。

我知道不变式冲突是关于错误引用类型的问题。因为它发生在模块内，我不确定是我做错了什么还是导入库中存在问题。也许是我在基于JavaScript的基本库上强制使用TypeScript检查所导致的问题。我还没有得出结论。

我尝试向gatsby-node.js添加以下配置以忽略模块检查（如此建议：https://gatsby.dev/debug-html），但构建没有成功，尽管错误已更改，因为它无法看到模块。

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

简要概述一下，这段代码旨在创建客户端对象以启用对graphql端点的查询。在运行“gatsby build”时出现了变体错误（如上所述）。

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

- schredder

---

你尝试过使用 import { createHttpLink } from 'apollo-link-http'; 吗？ - Amir-Mousavi

是的，实际上我尝试过了。它仍然触发了相同的错误。我还尝试了：`import ApolloClient from 'apollo-boost'const client = new ApolloClient({ uri: 'https://48p1r2roz4.sse.codesandbox.io'})`但似乎会触发（或引用）相同的问题。 - schredder

Answer 1

我是一个新手。经过几个小时的查找，我终于找到了文件中的错误。仔细检查后发现，当环境为生产环境时（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，然后生成的生产版本没有错误。

我不明白为什么在开发环境中没有抛出这个错误，但我想这可能与延迟加载有关。

问题已经解决。

- schredder

---

对于在使用Apollo和SSR与express时遇到此问题的任何人，如果您的路由崩溃并出现"Invariant Violation: Invariant Violation: 1"错误，则可以通过以下方法解决该问题。 - John Franke