时间戳

首页 > 解决方案 > Apollo - 构建生产构建时的 React (Typescript) 不变错误

reactjs - Apollo - 构建生产构建时的 React (Typescript) 不变错误

问题描述

我正在使用 gatsby、typescript 和 apollo（用于 graphql 查询）创建一个新的 react 应用程序。

在 dev 中测试时，应用程序编译并运行，没有抛出任何错误。

当我使用“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 问题？还是组合？

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

我了解 Invariant Violations 是关于引用错误类型的问题。因为这发生在模块中，我不确定我是否做错了什么，或者它是否是导入库中的问题。也许这是我强制对基于 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 build' 时会发生 in variant 错误（见上文）。

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

标签： reactjstypescriptwebpackapollogatsby

解决方案

我是这方面的新手。经过数小时的查找，我终于找到了文件中的错误。仔细检查，当环境是生产环境时（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 添加到我的代码中，它构建了一个没有错误的生产版本。

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

问题已解决。

推荐阅读