Question

我正在使用gatsby，打字稿和阿波罗创建一个新的react应用（用于graphql查询）。

在开发人员中进行测试时，该应用程序可以编译并运行，不会引发任何错误。

当我使用“ 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"

是打字稿问题，盖茨比问题，阿波罗问题还是Webpack问题？还是组合？

感谢您提供的任何帮助！我正在努力理解这里的所有内容。

我了解不变违规是关于引用错误类型的问题。因为这发生在模块中，所以我不确定是否做错了什么，或者这是否是导入库中的问题。可能是我在基于JavaScript的基本库上强制进行打字稿检查的问题。我仍未就此得出结论。

我尝试将以下配置添加到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构建”时，会发生in变量错误（请参见上文）。

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

Answer 1

我是这个新手。经过数小时的查找，我终于找到了文件中的错误。经过仔细检查，当环境为生产环境（process.env.NODE_ENV ===“生产”）时，该错误未详细说明。因此，我查看了如果环境是其他环境将导致的错误，并更改了文件以将其输出到控制台。我回来的是：

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，它构建了没有错误的生产版本。

我不明白为什么开发环境不会引发此错误，但是我认为这与延迟加载有关。

问题已解决。

Apollo-构建生产版本时，React（Typescript）不变错误

1 个答案: